JS事件触发CSS3的过渡效果

最新推荐文章于 2022-11-29 19:00:03 发布

麻辣_水煮鱼

最新推荐文章于 2022-11-29 19:00:03 发布

阅读量2.4k

点赞数 2

分类专栏：每日一记文章标签： css3过渡效果 CSS3 transition

本文链接：https://blog.csdn.net/weixin_42217154/article/details/103249700

版权

每日一记专栏收录该内容

85 篇文章 3 订阅

订阅专栏

原本许多需要js才能实现的动画效果，通过CSS3就能轻易实现了，但是CSS3也有自身的不足，例如说在动画触发上就没有js灵活，因此可以考虑将CSS3与Js结合使用。

一般使用transition过渡动画都是利用css的状态：hover，focus，active 来触发，比如：

div{    
    width: 200px;
    height: 200px;    
    background: #f00;
    transition: height 2s,width 2s;
    -moz-transition: height 2s,width 2s; /* Firefox 4 */
    -webkit-transition: height 2s,width 2s; /* Safari and Chrome */
    -o-transition: height 2s,width 2s; /* Opera */
}
div:hover{ /* 鼠标悬浮触发 */
    width: 400px;
    height: 400px;
}

现在想通过js点击事件来触发CSS3的过渡动画，可以在js中通过dom操作来改变div的css的具体属性，如：

div{
    display: none;
    width: 200px;
    height: 200px;
    background: #f00;
    transition: height 2s;
    -moz-transition: height 2s; /* Firefox 4 */
    -webkit-transition: height 2s; /* Safari and Chrome */
    -o-transition: height 2s; /* Opera */
}

function clickMe() {
  document.getElementsByTagName('div')[0].style.display = 'block';
  setTimeout(() => {
    document.getElementsByTagName('div')[0].style.height = '400px';
  }, 100);  
}

一个需要注意的地方：
当元素本身为display：none 时，若此时我们想通过js先将其变为display:block 并且随后再触发其他想要的transition过渡效果，需要在 js改变其为display:block 后用setTimeout延迟100ms左右的时间再去设置其他过渡动画，否则该过渡动画不会触发。