К посту про
interpolate-size: allow-keywords и о том, что теперь можно анимировать высоту, отлично подойдёт сегодняшний кодпен от Адама Аргайла.Демо: https://codepen.io/argyleink/pen/BaXyJRL
Этот же кодпен является прекрасной иллюстрацией, что ничего не случится, если анимации не будет (а не будет её в Safari и Firefox).
Кстати, там же можно увидеть применение селектора
:user-valid, а именно, концепции грязных полей: чтобы показать поле пароля в первый раз, надо сойти с поля ввода имени, blur; но после этого поле считается грязным и ввод пароля появляется моментально.Грязное — потому что пользователь потрогал. И наверняка, немытыми руками.
Ну чо вы начинаете, это известный концепт почти во всех библиотеках работы с формами. Вот в React Hook Form, например.
Если кто-то не понял, что происходит в кодпене, есть поддерживающая статья: https://nerdy.dev/interpolate-size
#css #animate #height