Question

我想创建一个弹出通知，我有一个初始顶部-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可见但转换未显示为动画。

这是小提琴http://jsfiddle.net/Bnuy7/2638/

Answer 1

当我将transition: all ease 0.5s添加到您的主ID时，它适用于我。也许只是错过过渡动画风格（轻松）而时间单位（0.5s）是问题？

Answer 2

您在转换延迟值之后错过了时间单位。

更改此内容：-webkit-transition: top 0.5;

：-webkit-transition: top 0.5s;

弹出一个css通知

2 个答案: