Как подключить анимацию к скрытию блока?

Question

[Александр]

Всем привет. Есть переключатель, он же чекбокс, по нажатию на который всплывает блок с текстом и анимацией (animate.css). Обратное переключение скрывает этот блок. Как сделать. чтобы скрытие было анимированным, то есть нужно добавить класс, к примеру animated fadeOutUp. Прошу вашей помощи.

Answer 1

[Арсений Матыцин]

Не использовать display:block\none. Так как к не будет применена css-анимация.
Из вариантов:

1. Использовать jQuery (ИМХО, не стоит тащить его всего ради этого)
   
2. Делать переход состояния
   
3. Полностью описывать анимация в JS (В документации есть экспериментальные animate, но я пока не берусь их юзать)
   

Comments

[Александр]

Делать переход состояния

Как реализовать на практике?

[Арсений Матыцин]

Нус, из примитивного:
1. Установить display: block + opacity: 0
2. Анимировать до opacity: 1
В обе стороны.

На свитче проблем быть не должно, а при попытке реализовать таким образом слайдер надо будет повозиться.

[Александр]

Арсений Матыцин, нужно именно с animate.css. В одну сторону работает, соответственно должен работать и в другую. Если вставить .block напрямую в JavaScript, то так работает. Но важно найти другое решение.

[Арсений Матыцин]

Дык я и не говорил, что надо строго в js анимировать) Что мешает классы переключать, к примеру? Включая тот самый, переходный.

Идея с вставкой интересная, кстати. Но лучше, ИМХО, просто брать элемент DOM вместе с содержимым и вставлять\удалять по необходимости. Я так люблю делать «бесконечный» слайдер)

К слову, решение можно переписать на чистом CSS+HTML.

[Александр]

Арсений Матыцин, не догоняю пока как по-другому сделать.

[Арсений Матыцин]

Прямые наводки я тебе оставил.
Примеров выписывать не буду.

З.Ы. странно, что тут еще не набежало умников, готовых все за тебя сделать)

[Александр]

Арсений Матыцин, вроде родил решение с подключением классов в js.

[Арсений Матыцин]

Вот тут косяк:
transform: scale(-1.-1);
Точка.