Как вернуть исходное состояние коллекции?

Question

[reinmaker90]

ДД! Каждый раз пишу, я тот кому изучение js дается очень тяжело, но я хрен сдамся, хоть до старости, но выучу!
Т.к без практики не выучить решил не пользоваться fancybox для модальных окон, а сам что то примитивное покрутить, исходные данные
openModal и closeModal 2 кнопки при клике на которые просто должен добавляться класс анимации и перевод дисплея из none->block, вопрос как сделать так что бы при клике на closeModal поочередно выполнялись действия удаления предыдущих классов, добавления нового для завершающей анимации и в конце концов получить исходное состояние элемента без классов анимации и display :none.Извините что так много написал)

Answer 1

[hzzzzl]

зачем так усложнять, лучше одним классом ограничиться, и его добавлять/убирать

Comments

[reinmaker90]

все потому что анимацию такую как в свойствах animate.css мне очень трудно сделать, подобный вариант я знаю, но нужен именно что бы сохранить анимацию, еще раз спасибо!

Answer 2

[McBernar]

1. Если хотите изучить JS, то начать нужно с удаления JQuery из вашей работы. Вы же даже, скорее всего, не понимаете, что происходит под капотом вызова .css('display', 'none').

2. Через display none/block/flex дом-элементы не анимируются. Используйте visibility и opacity в связке с абсолютным позиционированием (visibility: 0 не убирает из dom элемент)

3. Настройки нужных таймингов анимации надо делать через transition или через keyframes, а не через цепочку удаления/добавления классов.

4. Если уж прям очень надо - в JS есть ивент transitionend, который дожидается окончания анимации и делает, что укажете в коллбеке.

Comments

[reinmaker90]

1) думаю что метод находи элемент и перезаписывает в нем значения, как то так, думаю
2) про это не подумал, спасибо!
3) у меня туго с анимацией по этому эту тему я не трогал и в итоге решил остановиться на animate.css
4)так же не знал спасибо!