Size: a a a

Love Frontend Chat

2020 February 02

in Love Frontend Chat
У тебя анимациясработает как только CSS прогрузится
источник

ИФ

Илья Филиппов in Love Frontend Chat
ну поставь delay)
источник

in Love Frontend Chat
Илья Филиппов
ну поставь delay)
А если картинка не загрузиться за delay?
источник

in Love Frontend Chat
Нужно делать устойчивые решения, а не костыли
источник

ИФ

Илья Филиппов in Love Frontend Chat
хорошо, возможно чуть js не повредит)
источник

AT

Andrey Tsapko in Love Frontend Chat
Нужно делать устойчивые решения, а не костыли
Так а вопрос с контентом внутри wrapper, wrapper с background-color: white должен быть в качестве overlay какого-то вне блоков с контентом. В противном случае контент будет проебываться при манипуляции с opacity.
источник

in Love Frontend Chat
.container:before{
   content: "";
   width: 100%;
   height: 100%;
   backgrund-color: #fff;
}
источник

in Love Frontend Chat
document.addEventListener("DOMContentLoaded", function(){
   let contentWrapper = document.querySelector(".container:before");
   contentWrapper.style.opacity = 0;
});
источник

in Love Frontend Chat
Ну и transition накидываешь на container:before для плавности
источник

in Love Frontend Chat
В идеале отдельный класс на CSS написать для проявления, чтобы не дрочить аттрибуты и всё красивенько было
источник

in Love Frontend Chat
.container:before{
   content: "";
   width: 100%;
   height: 100%;
   backgrund-color: #fff;
}
Забыл, нужно position absolute поставить, а у родителя relative.
Так же в зависимости от реалиазции на контент нужно накинуть z-index
источник

AT

Andrey Tsapko in Love Frontend Chat
В идеале отдельный класс на CSS написать для проявления, чтобы не дрочить аттрибуты и всё красивенько было
Ну да, так и сделал. Многа лойсов и спасибо.
источник

AT

Andrey Tsapko in Love Frontend Chat
.background-wrapper {
 content: "";
 display: block;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1;
 background-color: #fff;
}

Вот так вот сделал. Это отдельный класс для ебучего оверлея.
источник

AT

Andrey Tsapko in Love Frontend Chat
Ну да, а контенту релейтив нужно дать, чтобы он от него плясал, сенкс за такие подробности, помог, риал.
источник

in Love Frontend Chat
Нез
источник

S

Saydi in Love Frontend Chat
В идеале отдельный класс на CSS написать для проявления, чтобы не дрочить аттрибуты и всё красивенько было
в идеале бэком нужно заниматься, а не этим вот
источник

in Love Frontend Chat
Saydi
в идеале бэком нужно заниматься, а не этим вот
Ты прав, я ебал эти каэсэсо жабы, вэбпаки, хтмлы
источник

AT

Andrey Tsapko in Love Frontend Chat
document.addEventListener("DOMContentLoaded", function(){
   let contentWrapper = document.querySelector(".container:before");
   contentWrapper.style.opacity = 0;
});
Ну а вот тут ты так псевдоэлемент не получишь, там по-другому немного. Да и без псевды я немного не понимаю реализации, тут псевда маст-хев вроде.
источник

in Love Frontend Chat
Andrey Tsapko
Ну а вот тут ты так псевдоэлемент не получишь, там по-другому немного. Да и без псевды я немного не понимаю реализации, тут псевда маст-хев вроде.
Псевду можно заменить так:
div.container
   div,wrapper
   div.content
источник

AT

Andrey Tsapko in Love Frontend Chat
Псевду можно заменить так:
div.container
   div,wrapper
   div.content
Псевда здесь wrapper, же.
источник