Web 开发中, 在用户体验上, 前端动态的 UI 交互非常重要. Web 开发动画可以用 CSS 也可以用 JavaScript 来实现, 简单不需要控制的动画, 可以用 CSS. 或纯 JavaScript, 更复杂的, 一般是 CSS + JavaScript 结合来用. 没有绝对优劣; 一切都取决于你的目标。

浏览器渲染

实例1: 鼠标经过箭头反转 (CSS + JS)

以下为 Vue 中代码: 鼠标经过时, 给 button 添加 class 'move', 离开时, 添加 class 'remove'

JS

      <el-button ref="button" slot="reference" class="button" :type="buttonType">
        {{ buttonText }}<i ref="arrow" class="el-icon-arrow-down el-icon--right" :class="isShow ? 'move':'remove'" />
      </el-button>

  data() {
    return {
      isShow: false
    };
  },
    methods: {
    // 组件显示调用
    show() {
      this.isShow = true;
    },
    // 组件隐藏调用
    hide() {
      this.isShow = false;
    }
  }

CSS

.remove {
  transition: all 0.5s;
}
.move {
  transform: rotate(180deg);
  transition: all 0.5s;
}

transition 属性是一个速记属性，用于设置四个过渡属性：

transitionProperty、 transitionDuration、 transitionTimingFunction 和 transitionDelay.

注意： 请始终设置 transitionDuration 属性，否则持续时间为 0，就不会产生过渡效果。

语法

返回 transition 属性：

object.style.transition

设置 transition 属性：

object.style.transition="property duration timing-function delay|initial|inherit"

属性值

值	描述
transitionProperty	规定应用过渡效果的 CSS 属性的名称。
transitionDuration	规定完成过渡效果需要多少秒或毫秒。
transitionTimingFunction	规定过渡效果的速度曲线。
transitionDelay	定义过渡效果何时开始。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

animation 动画

未完待续...

写着写着发现, 很多内容没有整理清晰出来, 先到这里. 后面整理好了在发出来.