（Vue动效）1.Vue的CSS过渡动效

Miya Wang

关键词： <transition></transition> 的使用

一、按钮控制页面展示与否

<body>
  <div id="root">
    <div v-if="show">hello miya</div>
    <button @click="handleClick">切换</button>
  <script>
    var vm = new Vue({
      el: '#root',
      data: {
	show: true
      methods: {
        handleClick: function(){
         this.show = !this.show  //按钮控制页面的展示与否
  </script>
</body>

二、页面效果渐隐渐现（动画）的效果

1、使用

<transition></transition> 所包裹的内容会有一个动画效果

2、场景

当一个dom元素标签被 <transition></transition> 包裹后，Vue会自动分析元素的CSS样式，然后构建一个显示/隐藏的动画流程，如图：

通过在某一时刻自动在div元素上增加一些class的底层原理，即使用 <transition></transition>， Vue帮助我们实现了CSS过渡效果。主要通过CSS3中 <transition> 属性的形式来实现。

代码如下：

<!DOCTYPE html>
<html lang="en">
   <meta charset="UTF-8">
   <title>Vue中的CSS动画原理——过渡动效</title>
   <script src='./vue.js'></script>
   <style>
    .fade-enter,.fade-leave-to {
       opacity: 0; /*点击按钮页面即将被显示，此时div标签处于隐藏状态*/
    .fade-enter-active,.fade-leave-active  {  
        transition: opacity 3s; /* 对该CSS样式进行transition的监控,有3s的过渡*/ 
   </style>
</head>
  <div id="root">
    <transition name="fade">
       <div v-if="show">hello miya</div>
    </transition>
    <button @click="handleClick">切换</button>
  <script>
   var vm = new Vue({
      el: '#root',
      data: {
	show: true
      methods: {
	handleClick: function(){
	  this.show = !this.show //按钮控制页面的展示与否
  </script>
 </body>
</html>

3、注意

（1） <transition> 中calss属性名可带或可不带。不带的话，样式直接就是在前面加上 v-xxx

<style>
   .v-enter,.v-leave-to {
      opacity: 0; /*点击按钮页面即将被显示，此时div标签处于隐藏状态*/
   .v-enter-active,.v-leave-active  {  
      transition: opacity 3s; /* 对该CSS样式进行transition的监控,有3s的过渡*/ 
</style>
<div id="root">
  <transition>
    <div v-if="show">hello miya</div>
  </transition>
  <button @click="handleClick">切换</button>
</div>

（2）被CSS3属性 <transition> 包裹的dom标签，修改 v-if 或 v-show 指令 控制显示/隐藏均带动画效果。

代码如下：

<transition>

一、按钮 控制 页面展示与否

二、页面效果渐隐渐现（动画）的效果

一、按钮控制页面展示与否