Есть ли плагин, который анимирует смену класса DOM-элемента?

Question

[creatoroftheworld]

Из предоставляющих такую возможность плагинов, кроме jQuery UI ничего не нашел. В нем функции add-, toggle-, removeClass модифицированы и имеют еще один параметр - время перехода. Это именно то, что нужно, но не хочется целую библиотеку подключать ради такой мелочи. Есть ли альтернативы какие-нибудь?

Comments

[Алексей Уколов]

А в чем ваша задача? Как можно анимировать смену класса? Вам нужно какой-то анимированный переход, видимо, от внешнего вида заданного одним классом к внешнему виду, заданному другим классом. Для этого можно использовать css-свойство transition, но без кода неясно поможет ли оно.

[creatoroftheworld]

Алексей Уколов: Блин, действительно...я почему-то был уверен, что транзишены не анимируют смену класса... Тупенький я)

Answer 1

[Константин Китманов]

Во-первых, лучше все-таки эти анимации делать на CSS, это, как минимум, производительнее.
Во-вторых, если CSS-анимации по каким-то причинам не подходят, можно взять от jQueryUI только нужное, размер получается уже не такой гигантский.
В-третьих, если и второй пункт не устраивает, можно вручную выдернуть реализацию оттуда и еще сильнее сократить размер.

Но я все-таки рекомендую остановиться на первом пункте. Пусть CSS занимается визуальными рюшечками. И да, вы не хотите знать, как именно jQueryUI анимирует добавление/удаление классов:)

Comments

[creatoroftheworld]

По поводу последнего, Хочу, но не дорос еще) Можете объяснить, если знаете и если не лень)

[Константин Китманов]

creatoroftheworld: да собственно никаких секретов, можете почитать исходники, довольно прозрачно написано, без «умных» хаков. Парсятся текущие стили элемента, парсятся стили класса, вычисляются свойства, которые изменятся, эти свойства и анимируются. По окончании анимации из style убираются свойства, которые менялись и добавляется собственно искомый класс.
Ничего такого, просто громоздкий процесс, и производительно это не может работать ну никак.

Answer 2

[Денис Инешин]

1. Вот этот инструмент позволит сделать любой блок анимируемым, максимально универсально: matthewlein.com/ceaser

2. А дальше вы например добавляете блоку еще один класс, который например меняет left с 0 на 100 и всё, анимация сработает.

3. И посмотрите в сторону animate.css.

Answer 3

[danilovalex]

Я думаю, Вам тут поможет вот этот плагин.
Сравнивайте event.attributeName на изменения className. Словили изменение - играйтесь там уже как считаете нужным.

Answer 4

[Александр Решетняк]

velosityJS более производителен чем чистый css codepen.io/collection/DjbJRV