Vue - 使用 transition 过渡动画、Animate.css 库动画

 

一. transition

• transition 标签包裹的内容会有一个过渡的动画效果
• 使用 transition 过渡组件需要满足的条件：
  1. 条件渲染（v-if）
  2. 条件展示（v-show）
  3. 动态组件
• 可以使用 name 属性给 transition 标签起名字
  1. class选择器名字和 name 属性有关系，这里 name 属性名为 fade, 则class选择器名称前缀都已fade开头，
  2. 如果不写name属性，则class选择器名称前缀默认以 v 开头
• transition 标签包裹的内容从隐藏变为显示时候动画原理
  1. 在动画即将被执行的一瞬间（动画执行的第一帧），会向transition内部的标签上增加两个class选择器名字，分别是v-enter、v-enter-active
  2. 在动画运行到第二帧的时候，会把 v-enter 的class选择器名称移除，然后增加一个v-enter-to的选择器名称
  3. 在动画执行结束的时候(动画执行的最后一帧），会把添加v-enter-active、v-enter-to的class选择器名称移除
• transition 标签包裹的内容从隐藏变为显示时候动画原理
  1. 在隐藏的第一个瞬间（动画执行的第一帧），会向transition内部的标签上增加两个class选择器名字，分别是v-leave、v-leave-active
  2. 在动画运行到第二帧的时候，会把 v-leave 的class选择器名称移除，然后增加一个v-leave-to的选择器名称
  3. 在动画执行结束的时候(动画执行的最后一帧），会把添加v-leave-active、v-leave-to的class选择器名称移除
• 过渡CSS类名
  <transition>中的name属性用于 替换 vue钩子函数中的类名 v ,默认为 v
  1. v-enter: 定义进入动画之前，元素的起始状态。在元素被插入时生效，在下一个帧移除。
  2. v-enter-active: 定义进入动画的状态。在元素被插入时生效，在transition/animation完成之后移除。
  3. v-leave:定义离开之后动画的终止状态。在离开过渡被触发时生效，在下一个帧移除。
  4. v-leave-active: 定义离开动画的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。

一个过渡动画的实例：

<template>
  <div class="wrap">
    <transition name="fade">
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切换显隐</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 3s;
}
</style>

二. Vue 中使用 @keyframes

1. @keyframes 的使用

1. style 中设置@keyframes
2. transition 标签 class样式中使用 @keyframes样式名称，这里为 bounce-in

<template>
  <div class="wrap">
    <transition name="fade">
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切换显隐</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
@keyframes bounce-in{
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.fade-enter-active {
  transform-origin: left center;
  animation:bounce-in 1s;
}
.fade-leave-active {
  transform-origin: left center;
  animation:bounce-in 1s reverse;
}

2. 自定义 transition 标签的 class 名字，使用 @keyframes

1. 设置 transition 自定义 class 名

 　　2. 设置 class 的过渡样式

 　　3. 一个实例

<template>
  <div class="wrap">
    <h2>css过渡动画</h2>
    <transition name="fade" enter-active-class="active" leave-active-class="leave">
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切换显隐</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
@keyframes bounce-in{
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.active {
  transform-origin: left center;
  animation:bounce-in 1s;
}
.leave {
  transform-origin: left center;
  animation:bounce-in 1s reverse;
}
</style>

三. Vue 中使用Animate.css库

1. 使用Animate.css库，设置动画

Animate.css 官网：https://animate.style/

1. 项目中引入 Animate.css 库
   使用教程：https://animate.style/#documentation

2. 使用 Animate.css 库

 

 　　3. 一个实例

<template>
  <div class="wrap">
    <h2>css过渡动画</h2>
    <transition name="fade" enter-active-class="animate__animated animate__bounceInDown" leave-active-class="animate__animated animate__bounceOut">
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切换显隐</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
</style>

2. 页面刷新，展示Animate.css库动画效果

上面设置的动画效果，在刷新的时候是没有效果的；如果需要在页面刷新时，也展示动画效果，需要添加以下设置：

 

3. 同时使用 transition 动画，和Animate.css 库动画效果

1. 增加 class 名

 　　2. style 中编写对应的样式

 　　3. 同时使用 transition 动画，和 Animate.css 库动画，动画时长不一致时，手动设置动画时长基准。设置 type 属性
　　 Animate.css 库动画默认为一秒结束，这里 transition 动画设置的时 3 秒结束，所以以 transition 动画为基准，三秒结束动画 type="transition"

 　　4. 自定义动画时长
　　　　为 transition 标签添加绑定 duration 属性，值为毫秒数 :duration="10000"


 　　5. 自定义动画时长，分别设置显示和隐藏的动画时长
　　　　为 transition 标签添加绑定 duration 属性，值为一个对象 :duration="{enter:5000,leave:10000}"


 　　6. 一个实例

<template>
  <div class="wrap">
    <h2>css过渡动画</h2>
    <transition
      :duration="{enter:5000,leave:10000}"
      name="fade"
      appear
      enter-active-class="animate__animated animate__bounce fade-enter-active"
      leave-active-class="animate__animated animate__shakeX fade-leave-active"
      appear-active-class="animate__animated animate__bounceInDown"
    >
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切换显隐</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 3s;
}
</style>