Bootstrap

vue 动画（transition）

一、 实现原理

在插入、更新、移除 DOM 元素时，在合适的时候给元素添加样式类名，配合 CSS 样式使用，实现动画效果。

通俗来讲，就是将要进行动画操作的 DOM 元素用 transition 标签包裹起来。在此html元素运动前，运动中，运动后这三个时候 vue 会给此 DOM 元素添加不同的 class ，然后配合 CSS 样式，实现动画效果。

示例：

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <!-- Vue 的内置动画标签 transition -->
    <transition>
      <!-- 只能包含 1 个元素 -->
      <h1 v-show="bol">组件动画效果</h1>
      <!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

<style>
/* 进入：始状态 */
.v-enter {
  transform: translateX(-100%);
  color: red;
}
/* 进入：末状态 */
.v-enter-to {
  transform: translateX(0);
  color: yellow;
}
/* 进入动画 */
.v-enter-active {
  transition: 10s;
  color: linear-gradient(red,yellow);;
}

/* 离开：始状态 */
.v-leave {
  transform: translateX(0);
}
/* 离开：末状态 */
.v-leave-to {
  transform: translateX(-100%);
}
/* 离开动画 */
.v-leave-active {
  transition: 1s;
}
</style>

二、 transition 标签

  • Vue 的内置动画标签: transition
  • transition 标签只能包含 1 个元素；如果里面写了多个元素，则只生效第一个
  • transition 包裹的标签需要设置 v-show / v-if 属性控制元素的显示

三、 动画 CSS 样式对应的类名

  • 进入：.v-enter 始状态、.v-enter-to 末状态、.v-enter-active 进入动画
  • 离开：.v-leave 始状态、.v-leave-to 末状态、.v-leave-active 离开动画
  • .v-enter 、 .v-leave 定义了动画的初始状态，在里面可以定义初始的位置，颜色，字体等。
  • .v-enter-to 、 .v-leave-to 定义了动画的最终状态，这两个类的定义最好和 DOM 的 class保持一致，否则动画结束后会瞬间从 .v-enter-to 、 .v-leave-to 的样式转变为 DOM 的样式（实例一，实例二）
  • .v-enter-active 、 .v-leave-active 定义了动画的渐变规则，比如是位置渐变的话会定义渐变的时间，路径；颜色渐变的话会定义颜色相关的渐变规则

3.1 实例一

会从红色渐变为黄色

<template>
    <div>
      <button @click="bol = !bol">隐藏/显示</button>
      <transition>
        <h1 v-show="bol" class="demo">组件动画效果</h1>
      </transition>
    </div>
  </template>
  
  <script>
  export default {
    name: "TestDemo",
    data() {
      return { bol: true };
    },
  };
  </script>
  
  <style>
  .v-enter-active,
  .v-leave-active {
    transition: 10s !important;
    color: linear-gradient(red,yellow) !important;
  }

  .demo {
    color: yellow;
  }

  .v-enter,
  .v-leave-to {
    transform: translateX(-50%);
    color: red;
  }
  </style>

3.2 实例二

会从红色渐变为黄色，然后瞬间变为黑色

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition>
      <h1 v-show="bol" class="demo">组件动画效果</h1>
    </transition>
  </div>
</template>
  
  <script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>
<style>
.v-enter,
.v-leave-to {
  transform: translateX(-50%);
  color: red;
}

.v-enter-to,
.v-leave {
  transform: translateX(0);
  color: yellow;
}

.v-enter-active,
.v-leave-active {
  transition: 10s !important;
  color: linear-gradient(red, yellow) !important;
}
</style>

四、 transition 标签的属性

4.1 name 属性

用于自动生成 CSS 动画类名

  • 如果 transition 标签元素没有设置 name 属性，则对应的动画类名为 v-XXX
  • 果设置了 name 属性，则对应的动画类名为 属性值-XXX
  • 当存在多个 tansition 标签时，我们可以通过 name 属性给各个 transition 标签指定不同的 CSS 动画效果

4.2 appear 属性

一开始就生效显示动画

4.3 mode 属性

  • in-out： 新元素先进行过渡，完成之后当前元素过渡离开
  • out-in： 当前元素先进行过渡，完成之后新元素过渡进入

4.4 示例

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <!-- Vue 的内置动画标签 transition -->
    <transition name="test" appear>
      <!-- 只能包含 1 个元素 -->
      <h1 v-show="bol">组件动画效果</h1>
      <!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

<style>
.test-enter,
.test-leave-to {
  transform: translateX(-50%);
  color: red;
}

.test-enter-to,
.test-leave {
  transform: translateX(0);
  color: yellow;
}

.test-enter-active,
.test-leave-active {
  transition: 10s !important;
  color: linear-gradient(red,yellow) !important;
}
</style>

五、 transition-group 标签

  • transition 标签只能包含 1 个元素、 transition-group 标签可以包含多个元素
  • transition-group 标签里面的元素需要设置 key 属性，作为当前元素的唯一标识
  • 除此之外，其它用法都和 transition 标签一样
<template>
  <div id="app">
    <button @click="isEditing = !isEditing">切换</button>
    <transition-group appear>
      <h1 v-if="isEditing" key="save">Save</h1>
      <h1 v-if="!isEditing" key="edit">Edit</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { isEditing: true };
  },
};
</script>

<style>
h1 {
  transition: 3s;
  position: absolute;
}
.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}
</style>

六、 JavaScript钩子函数

      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
  methods: {
    
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    console.log('beforeEnter');
    console.log(el);
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    console.log('enter');
    console.log(el);
    done()
  },
  afterEnter: function (el) {
    console.log('afterEnter');
    console.log(el);
  },
  enterCancelled: function (el) {
    console.log('enterCancelled');
    console.log(el);
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    console.log('beforeLeave');
    console.log(el);
  },
  leave: function (el, done) {
    console.log('leave');
    console.log(el);
    done()
  },
  afterLeave: function (el) {
    console.log('afterLeave');
    console.log(el);
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    console.log('leaveCancelled');
    console.log(el);
  }
  },

七、 vue实现动画的多种方法

7.1 transition

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition name="fade">
      <p v-if="bol">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  width: 100px;
}
p {
  border: 1px solid red;
  width: 300px;
}
</style>

7.2 animation + @keyframes

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition name="bounce">
      <p v-show="bol" class="demo">组件动画效果</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>
<style>
.bounce-enter-active {
  animation: bounce-in 5s;
}
.bounce-leave-active {
  animation: bounce-in 5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

7.3 animate.css

  1. 安装：npm install animate.css
  2. 引入样式库：import "animate.css"
  3. 给指定的 transition 标签添加 name 属性 animate_animate、animate__bounce
  4. 配置 enter-active-class 属性，指定进入动画：在样式库中挑一个进入的样式值，作为 enter-active-class 属性值
  5. 配置 leave-active-class 属性，指定退出动画：在样式库中挑一个退出的样式值，作为 leave-active-class 属性值
<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition
      name="animate__animated animate__bounce"
      enter-active-class="animate__bounceIn"
      leave-active-class="animate__bounceOut"
    >
      <p v-show="bol" name="animate_animate">组件动画效果</p>
    </transition>
  </div>
</template>

<script>
import "animate.css";
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

7.4 JavaScript钩子

  1. 当只用 JavaScript 过渡时，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
  2. 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

7.5 Velocity.js

  1. 安装：npm install velocity-animate
<template>
  <div id="app">
    <button @click="show = !show">显示/隐藏</button>
    <br />
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <p v-show="show">hello</p>
    </transition>
  </div>
</template>

<script>
import Velocity from "velocity-animate";

export default {
  name: "App",
  data: function () {
    return {
      show: true,
    };
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0;
    },
    enter: function (el, done) {
      Velocity(
        el,
        {
          rotateZ: "0deg",
          translateY: "0px",
          translateX: "0px",
          opacity: 1,
        },
        { complete: done }
      );
    },
    leave: function (el, done) {
      Velocity(
        el,
        {
          rotateZ: "45deg",
          translateY: "30px",
          translateX: "30px",
          opacity: 0,
        },
        { complete: done }
      );
    },
  },
};
</script>

7.6 多个元素的过渡

<template>
  <div id="example-2">
    <transition name="fade" mode="out-in">
      <button v-if="isEditing" key="save" @click="isEditing = !isEditing">
        Save
      </button>
      <button v-else key="edit" @click="isEditing = !isEditing">Edit</button>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TransitionTest",
  data() {
    return {
      name: "TransitionTest",
      isEditing: false,
    };
  }
};
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 1s;
}
.fade-enter {
  opacity: 0;
  transform: translateX(50px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-50px);
}

#example-2 {
  position: relative;
  padding: 100px;
}
#example-2 button {
  position: absolute;
}
</style>

7.7 多个组件的过渡

<template>
  <div id="transition-components-demo">
    <button @click="view = 'VA'">a</button>
    <button @click="view = 'VB'">b</button>
    <transition name="component-fade" mode="out-in">
      <component v-bind:is="view"></component>
    </transition>
  </div>
</template>

<script>
import VA from "./VA.vue";
import VB from "./VB.vue";

export default {
  name: "TransitionTest",
  data() {
    return {
      view: "VA",
    };
  },
  components: {
    VA,
    VB,
  },
};
</script>
<style scoped>
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 2s ease;
}
.component-fade-enter,
.component-fade-leave-to {
  opacity: 0;
}
</style>

7.8 for循环怎么动画 （列表的进入/离开过渡）

<template>
  <div id="list-demo" class="demo">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" :key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "TransitionTest",
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10,
    };
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length);
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++);
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1);
    },
  },
};
</script>
<style scoped>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

参考

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
matlab实现人脸图像匹配PCA,pca算法实现人脸识别
单片机控制继电器 使LED灯交替闪烁
springboot枚举简单使用笔记
别再说用不好AI了 因为你不会像我这样分而治之(超详细实操)
SpringBoot整合Canal实现数据同步到ElasticSearch
【基础算法总结】分治—归并
0基础学习Hive
IPython使用技巧：让编程更轻松有趣
Java 入门基础篇11 - java基础语法
Tightly Coupled LiDAR Inertial Odometry and Mapping源码解析（二）
;