169 похожих чатов

Привет. Кто то встречал похожую анимацию на gsap?https://gyazo.com/5e67ca35d6665e878cc46a435298b162

27 ответов

19 просмотров

так это легко сделать, просто меняешь размер при наведении

и gsap не нужен. этот блок абсолютно спозиционирован, просто изменяется высота, либо добавляются отступы, блоки исчезают, никаких асинхронных штучек

Poylar- Автор вопроса
🇰🇿 Alexei Karikov
и gsap не нужен. этот блок абсолютно спозициониров...

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

Poylar
Как сделать появление скрытых блоков на то место г...

заранее поставь элементы и скрой, затем просто отображай по последовательности

Poylar
Как скрыть?

el:hover { display: none ;}

Poylar- Автор вопроса
🇰🇿 Alexei Karikov
el:hover { display: none ;}

И где тут будет анимация как в гифке?

Poylar
И где тут будет анимация как в гифке?

дисплей нельзя анимировать, задаёшь анимации, потом можешь отслеживать завершение анимации и показывать

Poylar- Автор вопроса
🇰🇿 Alexei Karikov
дисплей нельзя анимировать, задаёшь анимации, пото...

Если даже я сначала сделаю display block, а потом добавлю какой то opacity 1 для анимации то у меня будет рывок блока у которого меняется высота

Можно вынести элементы за пределы блока и двигать к нужному месту. А весь контейнер с контентом overflow: hidden

Poylar- Автор вопроса
Poylar
Как высчитать нужно место?

Вручную меняешь координаты по двум плоскостям, тестируешь

Poylar- Автор вопроса
🇰🇿 Alexei Karikov
Вручную меняешь координаты по двум плоскостям, тес...

Текст может быть любой длинны и с любым кол-вом строк

Poylar
Текст может быть любой длинны и с любым кол-вом ст...

Парень, ты слишком зациклен на точности) Ты переходы будешь делать для определённых селекторов, всё будет синхронно, если так нужно будет

Poylar- Автор вопроса
🇰🇿 Alexei Karikov
Парень, ты слишком зациклен на точности) Ты перехо...

Дело не в синхронности а в правильном подходе. Понятное дело что все это можно захардкодить, но я так не хочу.

Poylar- Автор вопроса
🇰🇿 Alexei Karikov
Опиши подробнее, что ты хочешь видеть

Анимацию как на гифке без костылей и без фикс значений позиционирования. То есть должна быть какая то логика. У меня была идея скрывать элементы через height 0 и анимировать через гсап до height auto и это именно то что я ожидаю. Все элементы на своих местах и ничего не криво. Но ещё нужно увеличивать высоту всего блока и чтобы высота увеличивались одновременно и сверху и снизу. Я это решал тем что двигал элемент на 25% вниз во время увеличения высоты до 800 пх скажем. Просто хотел ещё варианты узнать , потому что это заморочено

Poylar
Анимацию как на гифке без костылей и без фикс знач...

Чтобы было без рывков, у этого блока должно быть width: 100%; И анимировать нужно max-height

Poylar
Анимацию как на гифке без костылей и без фикс знач...

https://codepen.io/Axiom777/pen/RwxwGpJ - я бы как нибудь так делал

Poylar- Автор вопроса
Evgenii Popov
https://codepen.io/Axiom777/pen/RwxwGpJ - я бы как...

Да, это похоже на мое решение чем то, но если добавить много текста (Больше чем высота блока), то оно вроде багается

Poylar- Автор вопроса
Evgenii Popov
Вроде не багается

а да, все окей. Спасибо изучу.

Похожие вопросы

Обсуждают сегодня

Всем привет! Имеется функция: function IsValidChar(ch: UTF8Char): Boolean; var i: Integer; ValidChars: AnsiString; begin ValidChars := 'abcdefghijklmnopqrstuvwxyzABCDE...
Евгений
44
Коллеги, я тут для личных нужд пошел ставить MQTT сервер, пощупал mosquitto, но ужаснулся отсутствию такой банальности, как HTTP API для посмотреть список топиков. А тут что,...
Maksim Lapshin
14
#include <stdio.h> #include <stdlib.h> #include <time.h> void mass_first_generate(int mass[5][7]) {     for (int N = 0; N < 5; N++) {         for (int A = 0; A < 7; A++) {   ...
Чувак
6
Всем привет! Решаю 99 OCaml Problems и столкнулся со следующей проблемой (прошу палками не забивать, я OCaml практически не трогал до этого момента): open OUnit2 let create_...
К|/|pи/\/\ 6е3yглbIи
2
<?php function prepareTel($data, $modx, $_multiTV) { if ($data['iteration'] == $data['row']['total']) { $data['tel'] = '<a class="link" href="tel: ' . $data['tel']...
Кирилл Гацевич
2
❓ Подскажите как сделать в группе телеги функцию (кнопку) пересылки сообщения где есть нарушение правил? Бот к каждому сообщению (по определенным ключам) добавляет снизу кнопк...
Alexander
4
Hi freinds. I'm reading an old Pascal book and I just want to compile and run its codes using fpc. What's your recommendation to use the environment efficiently? Please send m...
Shak
4
Ну вот просто даже давайте вот как. Какой нибудь конкретный кейс, можете в пример привести, где бч работает и приносит прикладную пользу, а не просто что бы было? Не крипту.
Alexander Andreev
22
https://www.linkedin.com/posts/ugama-benedicta-kelechi-codergirl-103041300_mobiledevelopment-fluttertraining-handsonlearning-activity-7263445699227254784-IdHB?utm_source=share...
CoderGirl
16
возможно ли как-то передать в электрон или таури медиа поток с рендера 2д движка? двиг запускается как dll, а дальше надо как-то отправлять рендер кодировать не подходит, зр...
Kyle Nekto
7
Карта сайта