自学内容网 自学内容网

007-CSS-动画效果


💡 Tips:动画效果会有影响浏览器加载性能,无特殊要求,尽量减少动画使用

1、transition 实现动画

以 Vue 项目举例,通过 js 代码,给元素添加 点击 事件

toggle() {
  this.show = !this.show;
}

控制 DOM 添加不同类名

<div @click="toggle">按钮</div>
<div class="el transition" :class="{ active: show }"></div>

控制 高度、位移(transform) 等动态变化,实现动画

.el {
height: 0px;
  width: 100px;
  border: 1px solid #ccc;
  background: #007aff;
}
.active {
  height: 100px;
}
.transition {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

2、keyframes 动画

💡 Tips:如果需要实现 loading 效果,或其他稍复杂动画,可采用 keyframes 进行封装

@keyframes loadRotate {
  from {
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes loadRotate {
  from {
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loadRotate {
  from {
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes loadRotate {
  from {
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes loadRotate {
  from {
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.move-rotate {
  transform-origin: 50% 50%;
  animation: loadRotate .5s linear 0s infinite normal;
  -webkit-animation: loadRotate .5s linear 0s infinite normal;
  -moz-animation: loadRotate .5s linear 0s infinite normal;
  -o-animation: loadRotate .5s linear 0s infinite normal;
}

原文地址:https://blog.csdn.net/loveEveryWeb/article/details/136415055

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!