我想在第一個影片完成時制作一些東西 > 開始另一個影片 > 當第二個影片也影片時 > 提醒一些東西
但是在這里，第一個影片結束后也會顯示警報？為什么會這樣？即使我說過要在影片時顯示警報
<div id="one">
<div id="second">
</div>
</div>
<button id="mybtn">
Animate
</button>
@keyframes test {
100% {
height: 0px;
}
}
#one {
height: 100px;
width: 100px;
background: red;
}
#second {
height: 70px;
width: 70px;
background: blue;
}
#mybtn {
margin-top: 50px;
}
const overlay = document.getElementById('one');
const second = document.getElementById('second');
const mybtn = document.getElementById('mybtn');
mybtn.addEventListener('click', function(){
second.style.animation = '4000ms ease forwards test';
second.addEventListener("animationend", function() {
one.style.animation = '4000ms ease forwards test';
one.addEventListener("animationend", function() {
alert('hello');
});
});
});
這是完整的 jsfiddle 代碼： - https://jsfiddle.net/hjqxvy89/
uj5u.com熱心網友回復：
顯然父元素也收到animationend了它的子元素的事件，所以你有兩個選擇，要么檢查event.target：
const overlay = document.getElementById('overlay');
const second = document.getElementById('second');
const mybtn = document.getElementById('mybtn');
mybtn.addEventListener('click', function(){
second.style.animation = '4000ms ease forwards test';
second.addEventListener("animationend", function() {
overlay.style.animation = '4000ms ease forwards test';
overlay.addEventListener("animationend", function(e) {
if (e.target === overlay)
alert('hello');
});
});
});@keyframes test {
100% {
height: 0px;
}
}
#overlay {
height: 100px;
width: 100px;
background: red;
}
#second {
height: 70px;
width: 70px;
background: blue;
}
#mybtn {
margin-top: 50px;
}<div id="overlay">
<div id="second">
</div>
</div>
<button id="mybtn">
Animate
</button>或者只是event.preventPropagation()在父事件處理程式中使用：
const overlay = document.getElementById('overlay');
const second = document.getElementById('second');
const mybtn = document.getElementById('mybtn');
mybtn.addEventListener('click', function(){
second.style.animation = '4000ms ease forwards test';
second.addEventListener("animationend", function(e) {
e.stopPropagation();
overlay.style.animation = '4000ms ease forwards test';
overlay.addEventListener("animationend", function() {
alert('hello');
});
});
});@keyframes test {
100% {
height: 0px;
}
}
#overlay {
height: 100px;
width: 100px;
background: red;
}
#second {
height: 70px;
width: 70px;
background: blue;
}
#mybtn {
margin-top: 50px;
}<div id="overlay">
<div id="second">
</div>
</div>
<button id="mybtn">
Animate
</button>另外： animationend 事件也會在子元素的影片結束時觸發？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/440958.html
標籤：javascript html css 动画
下一篇：如何在當前位置開始另一個影片？