1-3 动画

一、动画的原理

<transtion name="fade">
      <div v-show="show">hello world</div>
</transtion>
<button @click="toggle">切换</button>

当一个标签被transition包裹的时候,vue会自动给我们构建一个动画流程。

Enter的动画表示显示的动画 Tip:重点关注fade-enter的值 Leave的动画表示消失的动画 Tip:重点关注fade-leave-to的值

fade-enter-active,fade-leave-active监听动画的过程

export default {
  name: 'home',
  data(){
    return {
      show:true
    }
  },
  methods:{
    toggle(){
      this.show = !this.show;
    }
  }
}

<style scoped>
.fade-enter,.fade-leave-to{
  opacity: 0;
}
.fade-enter-active,.fade-leave-active{
  transition:opacity 2s;
}
</style>

二、动画详解

三、vue-cli和animate.css

3-1 安装animate.css

https://animate.style/

yarn add animate.css@3.7.2

3-2 配置

import animate from 'animate.css'
Vue.use(animate)

3-3 使用

<template>
  <div class="home">
    首页
    <transition name="fade" 
     enter-active-class="animated bounce"
     leave-active-class="animated shake">
      <div v-show="show">hello world</div>
    </transition>
    <button @click="toggle">切换</button>
  </div>
</template>
<script>
export default {
  name: 'home',
  data(){
    return {
      show:true
    }
  },
  methods:{
    toggle(){
      this.show = !this.show;
    }
  }
}
</script>