我有问题，当我打开菜单时，我需要这样的动画:
@keyframes opening {
from {
clip-path: circle(0% at 5%, 10%)
}
to {
clip-path: circle(100%)
}
}
@keyframes closing {
from {
clip-path: circle(100%)
}
to {
clip-path: circle(0% at 5%, 10%)
}
}
在我的菜单上
.menu {
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
background: #1f1f1f;
display: none;
}
菜单hamburger是按钮，我使用javascript打开和关闭它，同时在我的按钮上添加。classlist.toggle（class-display:block）
但是结尾动画不像我想要的那样工作
我也尝试使用转换，CSS和其他东西，但它没有给我安全的效果，就像我看到的关键帧
我尝试在CSS中做一个类。Opening{anination-name:Opening，duration等}，在我尝试用javascript添加它之后（toggle，settimeout adn等），菜单关闭动画效果不佳
谢谢
Just adding basic demo code for your undestanding.
.loader {
width: 56px;
height: 56px;
border: 8px solid transparent;
border-top-color: $warning;
border-bottom-color: $warning;
border-radius: 50%;
animation: loader-rotate 1s linear infinite;
top: 50%;
margin: -28px auto 0;
}
@keyframes loader-rotate {
0% {
transform: rotate(0); }
100% {
transform: rotate(360deg); }
}
为此，转换更合适:
null
document.addEventListener('click', () =>
document.querySelector('.menu').classList.toggle('open')
).menu {
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
background-color: #1f1f1f;
clip-path: circle(0% at 5% 10%);
transition: clip-path 2s;
}
.menu.open{
clip-path: circle(100%);
}<div class="menu" ></div>
Click anywhere to try out effect