gpt4 book ai didi

html - CSS 动画在动画输入后输出

转载 作者:行者123 更新时间:2023-12-02 01:52:34 24 4
gpt4 key购买 nike

显示时,我已经在 HTML 元素的属性中设置了动画,我希望反向有相同的动画,当单击按钮时它应该以相同的动画隐藏。我怎样才能做到这一点。

正在运行的“动画”:

.modal{
animation: myAnim 1s ease 0s 1 normal forwards;
}
@keyframes myAnim {
0% {
opacity: 0;
transform: translateX(-50px);
}

100% {
opacity: 1;
transform: translateX(0);
}

}

HTML:

<div id="myModal"  class="modal fixed hidden z-1 w-full h-full bg-red-100 h-screen ">

<button id="myBtn" class=" p-2 bg-yellow-400 rounded m-4 absolute right-0 text-xs font-bold ">
HIDE/SHOW..
</button>

我正在使用 JS 显示/隐藏模式。我怎样才能隐藏具有相同动画的模态。

最佳答案

创建两个类,一个用于使模态出现,另一个用于使其消失,

出现类别

.modal-appr{
animation: appr 1s ease 0s 1 normal forwards;
}
@keyframes appr {
0% {
opacity: 0;
transform: translateX(-50px);
}

100% {
opacity: 1;
transform: translateX(0);
}

}

使模式消失的类

.modal-disappr{
animation: disappr 1s ease 0s 1 normal forwards;
}
@keyframes disappr {
0% {
opacity: 1;
transform: translateX(0);
}

100% {
opacity: 0;
transform: translateX(-50px);
}

}

现在只需在按钮切换时使用 Javascript 将此类添加到模式的 classlist

const btn = document.querySelector('mybtn');
const modal = document.querySelector('#myModal');

btn.addEventListener ('click', function toggleClass () {
if(modal.classList.contains('appr')) {
modal.classList.add('disappr');
modal.classList.remove('appr');
} else {
modal.classList.add('appr');
modal.classList.remove('disappr');
}
})

关于html - CSS 动画在动画输入后输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70052159/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com