SOURCE

new Vue({
  el: '#app',
  data: {
    msg: 'hello',
    show: true
  }
})

<!--  思考问题点：
1、vue动画使用场景，解决哪些问题
		1、页面跳转衔接动画
		2、页面内容元素动画
2、使用条件
	  transition封装组件 需满足下面条件之一:
		1、v-if 条件渲染
		2、v-show 条件展示
		3、动态组件： 
        切换<component v-bind:is="currentTabComponent"></component>
		4、组件根节点
3、用法
		1、在 CSS 过渡和动画中自动应用 class
		2、可以配合使用第三方 CSS 动画库，如 Animate.css
		3、在过渡钩子函数中使用 JavaScript 直接操作 DOM
		4、可以配合使用第三方 JavaScript 动画库，如 Velocity.js
-->

<div id="app">
  <button @click="show = !show">
    Toggle
  </button>
  <!-- 如果使用了没有名字的 transition 则类名默认是 v-enter v-enter-active
        v-enter-to v-leave v-leave-active v-leave-to-->
  <transition name="fade">
    <p v-if="show">
      {{msg}}
    </p>
  </transition>
  <!-- CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除 -->
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>

.fade-enter-active,
.fade-leave-active {
  transition: all .5s;
}

.fade-enter,
.fade-leave-to{
  opacity: 0;
  transform:translateX(10px)
}

/* css 动画   */
.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);
  }
}