Open
Description
Affected version
0.13.0
No same issues found.
- Yes, I search all issues but not found.
Steps to Reproduce
- click overlay ,overlay hide in 3s second。
- click button, overlay show in 3s second。
Code example
<!DOCTYPE html>
<html>
<head>
<style>
.van-fade-enter-active {
animation: 3s van-fade-in both ease-out;
}
.van-fade-leave-active {
animation: 3s van-fade-out both ease-in;
}
@keyframes van-fade-in {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes van-fade-out {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
.van-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 111;
width: 100%;
height: 100%;
background: gray;
}
#btn {
width: 100px;
height: 100px;
background-color: antiquewhite;
text-align: center;
}
</style>
</head>
<body>
<div id="btn">点我啊</div>
<div class="van-overlay" style="" id="overlay"></div>
<script>
var overlay = document.getElementById("overlay");
function hide() {
overlay.style.display = "none";
overlay.className = "van-overlay";
}
function show() {
overlay.style.display= "block";
overlay.className = "van-overlay ";
}
overlay.onclick = function () {
overlay.removeEventListener("animationend", show);
overlay.addEventListener("animationend", hide);
overlay.className =
"van-overlay van-fade-leave-active";
};
var btn = document.getElementById("btn");
btn.onclick = function () {
overlay.removeEventListener("animationend", hide);
overlay.addEventListener("animationend", show);
overlay.style.display = 'block';
overlay.className =
"van-overlay van-fade-enter-active";
};
</script>
</body>
</html>
Expected results
css animation normal
Actual results
css animation run error