Здравствуйте! Имеется модальное окно с формой логина. Вопрос: как сделать чтобы при нажатии на кнопку lost password", first-form
плавно смещался влево, а на его место справа влево выезжал див с классом second-form
? Эффект, которого я хочу добиться можно увидеть здесь в форме входа, нажав на кнопку "забыли пароль?", но к сожалению, я не могу понять как оно реализовано. Ссылка черновик в кодпене.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
.modal-window {
position: fixed;
top: 10%;
left: calc(50% - 190px);
width: 380px;
padding: 40px;
box-shadow: 0 0 10px rgba(0,0,0,.5);
}
.first-form {
min-height: 300px;
background: rgba(0,0,0,.1);
}
.second-form {
display: none;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="modal-window">
<div class="form first-form">
Fields in first form;
<a href="#close">lost password</a>
</div>
<div class="form second-form">
email field
<a href="#close">back</a>
</div>
</div>
</div>