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;
}