Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jquery - анимация до состояния класса. (https://javascript.ru/forum/jquery/69215-jquery-animaciya-do-sostoyaniya-klassa.html)

winch 06.06.2017 17:52

jquery - анимация до состояния класса.
 
когда мне требуется анимировано позиционировать элемент, я пользуюсь функцией:
$(selector).animate({...css_state...});

когда мне надо установить css состояние определенное в классе, я использую:
$(selector).addClass(class_name);

а как быть, если надо добавить класс, но сделать это анимационно?

j0hnik 06.06.2017 17:58

прописать в css
.class{
		transition: 1s;
	}

laimas 06.06.2017 18:00

Цитата:

Сообщение от winch
надо добавить класс, но сделать это анимационно

Это как поооостепенно класс добавлять? :)

Можно по окончании анимации класс добавить. А вам чего надо?

winch 06.06.2017 20:05

Цитата:

Сообщение от laimas (Сообщение 454698)
Это как поооостепенно класс добавлять? :)

Можно по окончании анимации класс добавить. А вам чего надо?

например так
.class { margin:100px; }

надо чтобы, при добавлении этого класса, маргин плавно изменился от текущего состояния элемента, до 100 пикс.

winch 06.06.2017 20:09

Цитата:

Сообщение от j0hnik (Сообщение 454697)
прописать в css
.class{
		transition: 1s;
	}

в этом при добавлении класса плавность работает, а при снятии (removeClass) - происходит резко. как тогда при снятии плавности добиться?

winch 06.06.2017 20:19

laimas,
вариант сначала сделать анимацию, а потом добавить класс не канает, потому что у меня в js коде нет значений css параметров до которых мне надо анимировать. а эти значения находятся в классе.
т. е. я хочу разделить js и css код, таким образом чтобы в скрипте был только алгоритм, а все настройки параметров хранились в css.

laimas 06.06.2017 20:28

Цитата:

Сообщение от winch
надо чтобы маргин плавно изменился от текущего состояния элемента, до 100 пикс

Ну так это же не анимация добавления класса, а анимация css свойства. :) Это можно сделать и через CSS анимацию (@keyframes), можно и программно, через .animate().

winch 06.06.2017 20:33

laimas,
что такое @keyframes ?
через animate() не могу, читайте выше.

рони 06.06.2017 20:38

winch,
обычно делают 2 класса в одном transition: 1s; в другом margin:100px;

winch 06.06.2017 20:40

Цитата:

Сообщение от рони (Сообщение 454719)
winch,
обычно делают 2 класса в одном transition: 1s; в другом margin:100px;

не совсем понял, как это. можно пример кода?


Часовой пояс GMT +3, время: 12:09.