CSS: Плавная анимация скрытия 

🔗 Ссылки: 🎉🎉🎉 Мой новый курс по HTML и CSS: purpleschool.ru/course/html-css - 19 часов видео - 19 упражнений - 15 тестов - Неограниченный доступ и гарантия возврата средств 🎓 Мои курсы по разработке: purpleschool.ru 👨‍💻 Клуб разработчиков: purpleschool.ru/club 💬 Telegram канал с полезными советами: t.me/purple_code_channel

Это бомба. Делал через js, через ResizeObserver, а тут 2 строчки. Браво.

вот таким я бы хотел видеть весь ютуб, четким, быстрым, полезным, по делу! лайк подписка ))

Годный лайфхак. Спасибо тебе добрый человек. Замучили эти не анимируемые значения.

Я такое обычно через max-height 0 делаю. В css max-height: 0; overflow: hidden; visibility: hidden. По клику на кнопку вешаю класс с visibility: visible и добавляю на скрытый контент content.style.maxHeight = content.scrollHeight + 'px';

Если задуматься, то мы вроде как элементарные вещи делаем костылями 👍🏿👍🏿👍🏿. Фронтенд хуле

Больше таких видео, пожалуйста 🙏

СПАСИБО БОЛЬШОЕ! ЭТО ТО, ЧТО Я ИСКАЛ!!!

Всегда делал через js. Спасибо)

Ты ж мой герой, ахахах. Благодарю!

Спасибо! Можно еще через clip path (не помню точно, как, но я пробовал - работает). Она как раз для этого и создана. Только там с производительностью и другими нюансами могут быть локальные траблы.

Гениально!!!)

Забыли сказать о поддержке браузеров анимации свойство) Сафари вплоть до 15.6 версии не анимируют эти свойства...

А ещё можно вместо height:0 и height:auto использовать min-height/max-height

Супер, то что я искал, а то я щас верстаю сайт для портфолио, но реанимировать по высоте не получилось)

Спасибо.

Балин....сиолько пробовал это сделать на чистом жс, но никогда не получалось ))) Красота !

Супер тема, на работе делали лендос со страницей faq, версталщик начал чудить и в useEffect обращаться к элементу через document, брать у него высоту по offsetHeight и далее в styles присваивать, бред чисто, я психанул и залез в стили, хотя не моя прирагатива, ахахха

Гриды - мощь…

Что за расширение на vs code? Красивая картинка

Блин, спасибо большое, теперь я все больше стал любить гриды 😂😂😂

Что за шрифт и тему используете? И как так же сделать красивий VS code?

Не проще calc(auto + 0) ?

Только гридами пользуюсь!

Для чего добавлять еще одну обертку с min-height: 0?

Делаю через js, что бы после закрытия, элемент исчезал. Заметил что при большом количестве таких элементов браузер начинает лагать

Не самый идеальный способ. Он хороший, да, но не идеальный. Он похож на анимирование min-height, но немного другой. Немного лучше. И анимация к сожалению будет не плавная и с задержкой если нужно немного "приоткрыть" внутренность. Например вместо min-height: 0 сделать min-height: 100px Это происходит потому что в мнимое расширение grid-template-rows в течении этих 100px нам не видно, а после прохода данной отметки, плавность уже набрала свои обороты и кроме задержки мы получаем резкий "рывок". Примерно такая же проблема при транзишене на min-height. Советуют ставить любое большое значение на выходе, но чем оно больше, тем больше будет задержка (снова же, потому что мнимая анимация продолжается) и плавность тоже уйдет.

В Bootstrap по дефолту анимированный collapse/expand, хахв

Обычно я анимирую opacity и scale. Работает по сути так же

ie вышел из чата можно анимировать max height

Я вообше не добавляю на свои сайте какой то замороченный Фронтенд из-за того что я мало разбираюсь в CSS да и я делаю на своих сайтах поддержку старых браузеров

В каком редакторе текста ты кодишь? Я новичек

Что за программа для написания кода срочно?

у вас какая тема для VS code пожалуйста

как то мне гриды не полюбились в сердечке флексы и проще и привычней

Проще через max-height это делать. И не надо еще одно вложение делать с гридами

А как с поддержкой этого решения в браузерах?

А где вы пишите коды на html, css и js можете дать программу где всё бесплатно пожалуйста

А можно пожалуйста код функции collapse

Что за тема для vs code??

Я вообще не использую класс, просто через js maxHeight + scrollheight использую Если задать паддинги то даже с height 0 не скрыть(

Я правильно понял, что под эффективностью имелось все что угодно, но не перформанс?)

Это что за редактор кода такой красивый?

Почему она сворачивала обратно ?

а можно просто через slideToggle()

у меня анимация проходит, но текст остается почему-то

Ваш основной редактор Vim или VS Code?

Народ помогите новичку!!! Как сделать так, чтобы сама кнопка коллапсировала принажать на себя и показывала скрытый контент одновременно ? Мучаюсь 3 сутки

А что за IDE?

для слабаков?

через анимации можно было

Боже, пробелы 😢😢😢😢😢😢

Не надо так делать. А потом заказчик попросит amp версию сайта и ваши инлайновые стили вам боком вылезут. Вы читали про оптимизацию и колическтво вложеностей, каждая добавленная оббертка это как ещё одна упаковка для конфеты... гугл не рекомендует. Это плохой совет... аниммировать данный эфект необходимо через свойство анимации scale (0) -> scale (1) а потом ещё можно добавить will-change:transform; Вообщем это плохой совет!

Расчленёнка объекта, магия и нарушение DRY. Всё это следствие низкой ООП-культуры.

Смысл делать через высоту и прочие вещи, что тригерят рефлоу🤡 Анимации надо делать через трансформ

Как же бесят щелчки. Не понимаю людей, которым это нравится

потратил 15 мин на тебя. Дизлайк. У меня не получилось. Ошибка onlick cpllapse notdefined.

а что это за приложение которое ты используешь

jquery в помощь, .show/hide(slow/medium/fast/число в ms)

display: block|none не? Надо херню выдумать что бы ролик записать?

.collapse p{ height:0; transition:height 200ms ease-in-out; overflow:hidden; } .collapse .open { height:100%!important; } TEXT Ну если без гридов то как-то так

Недавно обнаружил, что для большей производительности ОБЯЗАТЕЛЬНО нужно избегать анимирования left, right, top, bottom, width, height и т.д. Это вызывает перерисовку всей страницы, так как меняются размеры. В идеале применять transition на transform (translate, rotation, scale и т.д.). В данном случае это решение подходящее, но в более загруженных анимациями проектах, где элементы сильно перемещаются стоит сразу делать через transform. Я потратил целый день, чтобы оптимизировать проект, который оказывается на мобилках стал жёстко тупить и даже крашиться вкладка из-за неоптимальных transition. Не повторяйте моих ошибок 😅 Изменения transform делаются не затрагивая разметку, поэтому работает ооочень плавно и не тормозит. (Загуглите примеры, смотрите с мобилки). Пример на SCSS: //медленно .main{ height: 100px; transition: height 1s ease-in-out; &.active{ height: 200px; } } //БЫСТРО .main{ height: 100px; transform: scale(1,1); transition: transform 1s ease-in-out; &.active{ transform: scale(1, 2); } }