jquery - анимация до состояния класса.
когда мне требуется анимировано позиционировать элемент, я пользуюсь функцией:
$(selector).animate({...css_state...});
когда мне надо установить css состояние определенное в классе, я использую: $(selector).addClass(class_name); а как быть, если надо добавить класс, но сделать это анимационно? |
прописать в css
.class{
transition: 1s;
}
|
Цитата:
Можно по окончании анимации класс добавить. А вам чего надо? |
Цитата:
.class { margin:100px; }
надо чтобы, при добавлении этого класса, маргин плавно изменился от текущего состояния элемента, до 100 пикс. |
Цитата:
|
laimas,
вариант сначала сделать анимацию, а потом добавить класс не канает, потому что у меня в js коде нет значений css параметров до которых мне надо анимировать. а эти значения находятся в классе. т. е. я хочу разделить js и css код, таким образом чтобы в скрипте был только алгоритм, а все настройки параметров хранились в css. |
Цитата:
|
laimas,
что такое @keyframes ? через animate() не могу, читайте выше. |
winch,
обычно делают 2 класса в одном transition: 1s; в другом margin:100px; |
Цитата:
|
winch,
вы сперва ответьте себе на вопрос чего вам надо. Ведь css анимация доступа только в CSS3, в версиях браузера не поддерживающих ее анимации не будет. Если вас это устраивает, можете делать на ней. Полезно будет сначала почитать что это такое. Там же и о поддержке. Кроме этого в сети найдете и еще много ресурсов по ней с примерами различными. Если же вас не устраивает такой расклад, то jQery .animate(). |
<html>
<head>
<meta charset="utf-8">
<style>
div{
margin-top: 0px;
transition: 1s;
width: 20px;
height:20px;
border: 1px solid red;
}
.animate{
margin-top: 320px;
}
</style>
</head>
<body>
<button class="navbar-toggle">rerwrewrwer</button>
<div class="f"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".f").toggleClass("animate");
});
});
</script>
</body>
</html>
вот вам пример из соседней темы |
свойство transition: изначально должно быть у элемента а не присваиваться вместе с классом
|
Если же задача при наведении/уходе мыши конкретному объекту нечто увеличить/уменьшить, то есть простые зависимости, то можно transition. Примеров этому тоже достаточно, вот например, есть там и почитать об этом.
|
winch,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.right{
margin:100px;
}
.left{
margin:0px
}
.animate {
transition: all 1s;
}
.hot{
border: 8px dashed Gray; padding: 5px; height: 100px; width: 100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var cls = ["left","right"];
$(".hot").on("click" , function() {
$(this).removeClass(cls.reverse().join(" ")).addClass("animate "+cls[0])
})
});
</script>
</head>
<body>
<style type="text/css">
</style>
<div class="hot">click me</div>
</body>
</html>
|
laimas,
кажется css3 сейчас уже практически все браузеры поддерживают. а надо мне вот что: допустим делаю класс .ActiveItem и хочу чтобы при присвоении этого класса элемент плавно стал крупнее и переместился в центр. а при снятии этого класса - элемент тоже плавно вернулся к своему обычному состоянию. но, как уже писал, параметры элементов должны быть не в js, а в css, чтобы настройки можно было делать не меняя скрипты, поэтому animate неподходит. за ссылку спасибо, почитаю. |
j0hnik,
теперь понятно, спасибо, попробую так … кстати, по моим наблюдением при использовании transition изменения происходят не плавно, а какими-то скачками рывками. хотя может это от браузера зависит… |
Цитата:
Это все надо учитывать обязательно. К примеру, есть заказчики, которые требуют поддержки даже IE6, хотя часто бывает, что они даже и не знают есть ли таковые у них посетители. Но это факт, и "бороться" с такими заказчиками очень сложно. Но бывают и оправданными такие действия, тут ничего не попишешь. В общем по данному вопросу только вам решать. Цитата:
|
Цитата:
|
рони,
т. е. идея в том чтобы сделать служебный класс .animate и каждый раз при изменеии состояния элемента добавлять этот класс? ок, попробуем так. |
https://matthewlein.com/ceaser/ вот вам конструктор, сможете сами задать как блоку стартовать и как финишировать!
|
laimas,
ну нафиг - древние ie`шки ещё поддерживать!! буду css3 пользоваться. |
всем большое спасибо за подсказки!!!
почитаю, поэксперементирую. |
рони,
ну так зачем плавность через JS, если транзакция через CSS, там и задать ее. |
Цитата:
|
Цитата:
.class {
-webkit-transition: all 500ms cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 500ms cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 500ms cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 500ms cubic-bezier(0.000, 0.000, 0.580, 1.000); /* ease-out */
}
|
laimas,
я писал про это .animate { transition: all 1s cubic-bezier(.17,.67,.83,.67) } и дал ссылку на сайт где параметры cubic-bezier можно подобрать |
|
Цитата:
|
| Часовой пояс GMT +3, время: 07:36. |