css - 创建一个 css 通知弹出

Question

我想创建一个弹出通知，我有一个初始顶部为 -200px 的 div

#onthefly-main {
  height: 190px;
  width: 100px;
  position: fixed;
  top: -200px;
  right: 10px;
  -webkit-transition: all 0.5;
  transition: all 0.5;

我还定义了一个类，top: 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 可见，但过渡未显示为动画。

这是 fiddle http://jsfiddle.net/Bnuy7/2638/

Answer 1

当我将 transition: all ease 0.5s 添加到您的主 ID 时，它对我有用。也许只是缺少过渡动画样式(轻松)和时间单位(0.5 秒)是问题所在？