Как применить transition при смене display?

Question

[lololoshka2010]

https://codepen.io/sasasasassdasadsad/pen/qBxWgdd
1.Как применить transition при смене display?
2.Как сделать,чтобы плюсик при клике поворачивался на 45 градусов и при еще одном клике на -45 и чтобы он в конце в исходное положение вставал(также хорошо было бы как-то убрать его увелечение при движении).
3.возможно как то сделать, чтобы форма выглядела с загогулиной внизу как тут с помощью css: https://www.google.com/search?q=%D1%81%D0%BC%D1%81...
спасибо!

Comments

[Антон Литвиненко]

свойство display не анимируется

[Сергей delphinpro]

точнее – дискретные свойства не анимируются. Это те, у которых есть конечное количество вариантов значений.

[Danny Arty]

1. Помимо display, как вариант, можно анимировать opacity. Т.е. 0 при display: none; и 1 при display: block;
2. Задать стили для условного класса и делать toggleClass

.rotated {
     transform: rotate(45deg);
}

3. Можно с помощью псевдоэлемента before