弹出一个css通知

时间:2017-12-11 19:44:58

标签: css css3

我想创建一个弹出通知, 我有一个初始顶部-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/

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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

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

-webkit-transition: top 0.5s;