Анимация CSS grid? Зачем? wtf?

MadHost - ваш надежный провайдер в сфере хостинга! Надежные серверы, быстрая поддержка и тарифы от 29р в месяц! Забудьте о проблемах с хостингом и доверьте нам свой сайт!
madhost.pw
kakietoyroki-t...

[@kakieToYroki]

MadHost - ваш надежный провайдер в сфере хостинга! Надежные серверы, быстрая поддержка и тарифы от 29р в месяц! Забудьте о проблемах с хостингом и доверьте нам свой сайт!
madhost.pw
Потестировать анимацию можно тут: kakietoyroki-test.ru

[@iKorewBro]

Хорошо что придумали хостинг, иначе как бы мы тестировали цсс анимации

[@KatanaCSSML]

Ахахах, точно. А если нужно кому-то показать, то GitHub Pages поможет с этим. Но, справедливости ради, стоит признать что MadHost реально не плохой выбор.

[@Alequez97]

😂😂😂 пока не досмотрел не понял шутку, красава, поднял настроение

[@Rafael-cq4rb]

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

[@kakieToYroki]

Не уложусь в минуту тогда ))

[@MsVolkan007]

Спасибо за рекламу в большую часть шортса

[@syoritohatsuki]

Беспланый Github Pages😶

[@АлександрПанцерный]

Чувак, такое надо лить на aws, на шаред хостинге будет тормозить

[@Aristockij]

это вообще супер польза. Раньше не знал о такой штуке, приходилось анимировать через min-height. Спасибо буду юзать)

[@pantydev]

ну такое. Пример это подходит только в случае если текст весь скрыт. Иначе, если тебе нужно немного его держать раскрытым, это будет дергано, так как анимация все равно будет идти с нуля.
К слову, видел этот лайфхак в PurpleSchool, вы там у друг-дружки идеи чтоль тырите?))

[@Robinhood69]

этот пример подходит только если надо линкануть рекламу хостинга в ролик xD

[@alphanoize]

Штош ты им не сказал за говняный снег ,который портит весь ux
Серверов даже нет, толька за три тыщи

[@xvare226]

в РФ раскупили все) Есть германия и вебхостинг в РФ)

[@soul_loneliness]

Тоже самое без js
.toggle-button {
display: inline-block;
border: 1px solid #ccc;
padding: 0.5rem;
margin: 2px 0;
cursor: pointer;
transition: all .2s ease;
}
.toggle-button:hover {
background-color: #ccc;
}
.toggle-button:active {
background-color: #9b9a9a;
}
#toggle {
all: unset
}
.content {
width: fit-content;
border: 1px solid #ccc;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: all .3s ease;
}
#toggle:checked ~ .content {
padding: 0.1rem;
grid-template-rows: 1fr;
}
.text-wrapper {
min-height: 0;
margin: 0;
}
Экспандер

Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Pariatur hic neque illum omnis maiores, deserunt ad.
Corrupti velit officia fuga!

[@TSUNAMIBEATSONE]

Интересная реализация. Без лишних библиотек анимации. Интересно, а можно заморочиться, если в сетке грид несколько карточек. И новая допустим "последняя" карточка появлялась бы или удалялась тоже с выплывающей анимацией)

[@igorblagoy6718]

Не могу не восхититься,на сколько элегантно была вставлена реклама

[@Noilty]

реклама, дизлайк

[@easy-bot]

Не рекомендовать видео с этого канала. Досвиданья и прощай.

[@kakieToYroki]

Эх... как же я без тебя теперь буду

[@xvare226]

разве это реклама?

[@Andrew_Dreamer13]

лично у меня плавности не получилось на гридах. Попробую позже разобраться

[@exelione2229]

тоже плавности не выходит) Наверное надо сначала купить Mad хост))

[@kakieToYroki]

Там же 2 строки кода, где вы там запутаться смогли?)

[@exelione2229]

@@kakieToYroki я класс через toggle меняю, transition .3s работает, а ease нет :(

[@kakieToYroki]

@@exelione2229
Вот полный код, сравните со своим, может где-то что-то забыли
.content {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows .3s ease;
}
.content.open {grid-template-rows: 1fr;}
.text-wrapper {min-height: 0;}
Экспандер
контент
const toggle = document.querySelector('#toggle');
const content = document.querySelector('.content');
toggle.addEventListener('click', () => {
content.classList.toggle('open');
});

[@exelione2229]

@@kakieToYroki теперь заработало)) Не то во wrapper завернул) Спасибо, сенсей) А Мэдхост для пэтичей куплю на днях)

[@fuad2069]

Как раз это я и искал

[@den_plotnikoff]

Мне интересно, а такие программисты в целом работают на более серьезных вещах?

[@kakieToYroki]

Нет, мы снимаем простенькие шортсы и живем на 3 доширака в неделю от рекламы

[@SUPPHY-]

Есть способ проще:
1) подключаешь bootstrap
2) используешь

[@kakieToYroki]

... старый советский надежный

[@elkhanhuseinov9804]

СЛОЖНО!!!

[@kakieToYroki]

А кому сейчас легко?)

[@elkhanhuseinov9804]

@@kakieToYroki Это психи (мысли в слух). Вам большое спасибо за знания, с которыми делитесь с нами ✊🏻✨👍🏼

[@gift.albooms]

Чтобы протестировать - нажимаем F5 😊 Тащить этот пример на хостинг дольше, чем его писать. (автор прости)