我想创建一个弹出通知, 我有一个初始顶部-200px的div
#onthefly-main {
height: 190px;
width: 100px;
position: fixed;
top: -200px;
right: 10px;
-webkit-transition: all 0.5;
transition: all 0.5;
我还定义了一个顶级的类:20px;
#onthefly-main.visible {
top: 20px;
-webkit-transition: all 0.5;
transition: all 0.5;
}
var onClick = function() {
document.getElementById('onthefly-main').classList.add('visible');
};
这使div可见但转换未显示为动画。
答案 0 :(得分:1)
当我将transition: all ease 0.5s
添加到您的主ID时,它适用于我。也许只是错过过渡动画风格(轻松)而时间单位(0.5s)是问题?
答案 1 :(得分:0)
您在转换延迟值之后错过了时间单位。
更改此内容:-webkit-transition: top 0.5;
:-webkit-transition: top 0.5s;