1 回答

TA貢獻1802條經驗 獲得超10個贊
這是一個示例。我不建議你在這里使用animation。在你計劃的兩個動畫之間,你的元素回到它的默認狀態,這讓事情變得丑陋。
相反,我會做的是使用 shorttransition來平滑兩種狀態之間的東西,并通過 JS 繼續處理它。
const notification = document.querySelector('.notification');
function startNotification() {
notification.classList.add("nShow");
setTimeout(() => {
notification.classList.remove("nShow");
}, 3000);
}
.notification {
opacity: 0;
position: absolute;
top: 0px;
transition: all 1s;
}
.notification.nShow {
top: 85px;
opacity: 1;
}
.root {
position: relative;
}
<button onclick="startNotification()">Start notification</button>
<div class="root">
<div class="notification">Hello</div>
</div>
正如在第一個版本中所說,我認為您不應該同時使用visibility
and ,并且由于您已經在使用不透明度,所以讓我們完全使用它。opacity
添加回答
舉報