CSS 设置transition-duration属性无效问题

在css文件中使用transition-duration属性设置过渡动画效果,在使用js设置元素top(element.style.top=...)时发现并没有过渡效果。

经过排查后发现是因为添加该属性的元素未设置top属性值,即没有动画的初始值导致过渡动画失败。添加:

    {
      ...
      top:0px;
      transition-duration: 280ms; 
      -moz-transition-duration: 280ms; 
      -webkit-transition-duration: 280ms; 
      -o-transition-duration: 280ms;
    }

同理, 在操作其他属性的时候,如:left等,也应该设置对应属性的初始值。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,328评论 0 11
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,616评论 0 6
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,627评论 1 13
  • 深入理解CSS过渡属性transition CSS中过渡属性transition,可以在不需要JS的情况下实现简单...
    createK阅读 4,545评论 0 6
  • 1.CSS3 边框 border-radius CSS属性用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两...
    garble阅读 665评论 0 0