vue动画（transition）的使用及实现动画的方法有哪些

一，实现动画条件：

1, 如果要实现一个元素动画展示，那么当前元素/组件必须是通过v-if v-show 动态组件。

2,动画元素外层必须有内置组件transition包裹起来

3，transition 有个name属性 name属性的值为动画类名

  动态类名分以下几种

  name-enter  name-enter-active  name-enter-to

   name-leave name-leave-active  name-leave-to

二，实现动画方法

      方法1：

<template>
  <div id="app">
    <button @click="show = !show">点击</button>
    <!-- <transition name='fade'>
      <div v-if="show"  class="box"></div>
    </transition> -->
     <!-- <transition name='rotate'>
      <div v-if="show"  class="box"></div>
    </transition> -->
     <!-- <transition name='slider'>
      <div v-if="show"  class="box"></div>
    </transition> -->
      <transition name='move'>
      <div v-if="show"  class="box"></div>
    </transition>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import OnePage from './components/OnePage.vue'
export default {
  name: 'App',
  components: {
    // HelloWorld,
    // OnePage
  },
  data(){
    return{
      show:true
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/* 淡出淡入 */
/* .fade-enter-active,.fade-leave-active{
  transition: all 6s ;
}
.fade-enter,.fade-leave-to{
  opacity: 0;
} */


/* 旋转 */
/* .rotate-leave-active{
  transition: all 6s ;
}
.rotate-leave-to{
  transform: rotate(720deg);
} */


/* 滑动 */
/* .slider-enter-active,.slider-leave-active{
  transition: all 3s;
}
.slider-enter,.slider-leave-to{
 height: 0px !important;
} */

/* 移动 */
@keyframes move{
  0% {
    transform: translate(0,0);
  }
  25%{
    transform: translate(200px,0);
  }
  50%{
    transform: translate(200px,200px);
  }
  75%{
    transform: translate(0,200px);
  }
  100%{
    transform: translate(0,0);
  }
}
.move-enter-to,.move-leave-to{
  animation: move 5s 0s linear;
}
.box{
  width: 50px;
  height: 50px;
  background: red;
}
</style>

如果有多个元素动画的时候  我们可以使用transition-group 并加唯一key值

<template>
  <div id="app">
    <button @click="show = !show">点击</button>
    <transition-group name="move">
      <div v-if="show" key="1" class="box"></div>
      <div v-if="show" key="2" class="box"></div>
      <div v-if="show" key="3" class="box"></div>
      <div v-if="show" key="4" class="box"></div>
    </transition-group>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import OnePage from './components/OnePage.vue'
export default {
  name: "App",
  components: {
    // HelloWorld,
    // OnePage
  },
  data() {
    return {
      show: true,
    };
  },
  methods: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

/* 移动 */
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(200px, 0);
  }
  50% {
    transform: translate(200px, 200px);
  }
  75% {
    transform: translate(0, 200px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.move-enter-to,
.move-leave-to {
  animation: move 5s 0s linear;
}
.box {
  width: 50px;
  height: 50px;
  background: red;
  margin-bottom: 20px;
}
</style>

 方法2：不用enter和leave实现动画 （可以实现动画不消失要求）

<template>
  <div id="app">
    <button @click="show = !show">点击</button>
    <!-- 不用enter和leave实现动画 -->
    <div :class="show?'box rotate':'box'" ></div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import OnePage from './components/OnePage.vue'
export default {
  name: 'App',
  components: {
    // HelloWorld,
    // OnePage
  },
  data(){
    return{
      show:true
    }
  },
  methods:{
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.box{
  width: 50px;
  height: 50px;
  background: red;
  transition: all 2s;

}
.rotate{
  transform: rotate(300deg);
}
</style>

 方法3：使用swiper中的animate.css库

1，通过link或import引入该css

 2,代码实现如下

<template>
  <div id="app">
    <button @click="show = !show">点击</button>
   <!-- 使用animate -->
   <div class="box rubberBand animated "></div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import OnePage from './components/OnePage.vue'
export default {
  name: 'App',
  components: {
    // HelloWorld,
    // OnePage
  },
  data(){
    return{
      show:true
    }
  },
  methods:{
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.box{
  width: 50px;
  height: 50px;
  background: red;
}

</style>

在使用这个animate.css时候，另外一种实现动画方法：提前命名类名

<template>
  <div id="app">
    <button @click="show = !show">点击</button>
  
  <transition
  enter-active-class="animated swing"
  leave-active-class="animated shake"
  >
    <div v-if="show" class="box"></div>
  </transition>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import OnePage from './components/OnePage.vue'
export default {
  name: 'App',
  components: {
    // HelloWorld,
    // OnePage
  },
  data(){
    return{
      show:true
    }
  },
  methods:{
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.box{
  width: 50px;
  height: 50px;
  background: red;
}

</style>

 方法4，其他实现动画的插件：wow.js插件