Я хочу сделать анимацию которая изменяет высоту блока с 100px до 700px , все получилось но есть проблема . Анимация проигрывается а потом высота приходит в начальное положение , как сделать что бы анимация останавливалась на высоте 700px пока не отведешь мышку от блока
3 ответа
Если стоит задача всего лишь менять по наведению высоту блока, для этого не нужна анимация - просто добавьте блоку свойство transition:
div {
width: 300px;
height: 100px;
border :1px solid red;
transition: 1s;
}
div:hover {
height: 700px;
}
<div></div>
Можно сделать при помощи свойства transition
$('.add').on('click', () => {
$('.add').remove();
$('.block').addClass('anim');
});
.block {
display: block;
width: 200px;
height: 100px;
background: red;
transition: height linear 1s;
}
.anim {
background: green;
height: 700px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block"></div>
<input type="button" class="add" value="анимация">
Можно при помощи animation
$('.add').on('click', () => {
$('.add').remove();
$('.block').addClass('anim');
});
.block {
display: block;
width: 200px;
height: 100px;
background: red;
}
.anim {
background: green;
animation: NewHeight linear 1s 1 forwards;
}
@keyframes NewHeight {
to {
height: 700px;
}
}
@-webkit-keyframes NewHeight {
to {
height: 700px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block"></div>
<input type="button" class="add" value="анимация">
Вообще, по описанию похоже, что надо делать transition
, а не animation
.
Но если надо использовать именно animation
, то там есть параметр animation-fill-mode
, который можно выставить значение both
.