css+js实现页面动画效果

最新推荐文章于 2024-05-22 19:36:03 发布

JiongLJiong

最新推荐文章于 2024-05-22 19:36:03 发布

阅读量463

点赞数

文章标签： css javascript 动画

本文链接：https://blog.csdn.net/ganggun/article/details/129578942

版权

1、对要实现动画效果的标签id定义css样式：

<div id="functionCol">

</div>

#functionCol {
  transition: width 2s;
  -webkit-transition: width 2s;
  width: 97%;
}

注：transition后边跟的css样式不仅局限于width，还有high、left、right等。2s表示2秒实现width从97%变到0%。

2、在点击事件绑定的方法中通过js获取标签的div对其进行宽度修改：

controlButter() {
      let functionDiv = document.getElementById('functionCol')
      if (this.centerUnfold) {
        this.centerUnfold = !this.centerUnfold
        this.centerFold = !this.centerFold
        functionDiv.style.width = '0%'
      } else {
        this.centerUnfold = !this.centerUnfold
        this.centerFold = !this.centerFold
        functionDiv.style.width = '97%'
      }
    },