Pavel-ww, просто мне кажется, что писать JS анимацию для такой просто задачи ну слишком... fadeIn и fadeOut не сложные конечно, но обычно такие задачи решают через классы. У меня и так все работало на переключении классов.
Сделал как вы сказали, через инлайн добавлял display flex (мне флекс нужен), а потом переключал класс, но не получилось, первый раз открывается резко.
andand44, но все равно странно. У меня щас есть абсолютно голый сайт, где есть только этот попап и его стили. И там проблема остается. Вот: r.test.mirsaitov.pw/test
В Edge выскакивает даже без Ctrl + F5
andand44, кажись, помогло. Закомментил iframe и обновил раз 50 с Ctrl + F5. Не увидел попапы. Потом опять вернул iframe и сразу увидел попап при обновлении. Офигеть. Спасибо большое. И представить не мог, что проблема может быть в этом. А как быть с тем сайтом, где нет iframe'ов?
Да часто вижу такое решение для скрытия элементов. В основном это нужно для добавления плавности. У меня попап медленно появляется (opacity анимируется), а карточка съезжает вниз.
Так я создал чистый сайт, на нем только попап был и его стили. Неужели браузер так долго читает файл стилей в хеде, что успевает попап прорисовать? Да и в вопросе я написал, что если написать display: block попапу, то этого не происходит или если убрать transition. По-моему я уже пробовал стили попапа переносить вверх, но щас еще раз попробую и отпишусь
RAX7, мне понравился ваш способ с организацией цикла для requestAnimationFrame. Я попытался реализовать удаление функции из множества rafQueue, если я захочу остановить какую-то анимации. Написал функцию discard(fn) в которой просто делаю rafQueue.delete(fn). Но проблема в том, что при передаче в нее метода класса, например, так: discard(square.animate.bind(this)) метод не удаляется из очереди. delete считает, что такой функции в множестве нет. Подозреваю, что это из-за того, что мы передавали функции в add предварительно связав ее с контекстом this через bind. Как можно решить эту проблему?
Александр, ну об этом я вкурсе, но что мне еще остается? Думал, через CSS классы все делать, но как-то костыльно выходит:
клик -> добавляем inset через JS и opacity 1 (перед этим задаем transition в CSS, чтобы opacity плавно изменился).
А далее нужно отследить момент, когда переход в opacity 1 закончится и начать расширять модалку. Отслеживать окончание transition как-то мне не очень нравится. Ну допустим. Далее устанавливаем inset(0px 0px 0px 0px), ждем пока модалка расширится, опять отследили когда переход закончился и фейдим контент.. короче каша какая-то
Роман, ну прикольно, можно и так попробовать, наверное. Я поигрался со значениями и подобрал оптимальные. Только вот не понимаю как работает ваше плавное стирание, когда точек больше одной вы рисуете прямоугольник на весь канвас с прозрачностью. Почему он стирает только хвост, а не фейдит весь след?
Сделал как вы сказали, через инлайн добавлял display flex (мне флекс нужен), а потом переключал класс, но не получилось, первый раз открывается резко.