При открытии details контент появляется с animation, в котором opacity с 0 на 1 стоит, но этот animation не всегда работает и контент появляется без него.
Анимация может при первом нажатии сработать, а самое интересное, когда я в DevTools нажму на элемент для просмотра в нём css, то тогда анимация работает.
Демонстрация на видео:
https://youtu.be/5FRvu6HY8BA
Код:
details{
display:block;
width:100%;
overflow:hidden;
}
.footer__burger ul{
list-style: none;
}
.footer__burger li{
margin-bottom: 20px;
}
.footer__burger ul:last-child li:last-child{
margin: 0;
}
summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;}
summary {
display:block;
font-size:1.4em;
cursor: pointer;
position: relative;
}
summary:before {
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: url("../images/icons/bottom-arrow.svg") center / 100% no-repeat;
width: 24px;
height: 24px;
content: "";
position: absolute;
-webkit-transition: -webkit-transform .5s ease;
transition: -webkit-transform .5s ease;
-moz-transition: transform .5s ease, -moz-transform .5s ease;
transition: transform .5s ease;
transition: transform .5s ease, -webkit-transform .5s ease, -moz-transform .5s ease;
}
details[open] > summary:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
details[open] summary ~ *{
-webkit-animation: sweep .3s ease;
-moz-animation: sweep .3s ease;
animation: sweep .3s ease;
}
@-webkit-keyframes sweep {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes sweep {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes sweep {
0% {opacity: 0;}
100% {opacity: 1;}
}
Простой
