Vue 过渡

class类名之间的区别

单个说明不是很好理解，我们直接看它的流程图

v-enter(动效开始之前)>------>------>------>v-enter-to(动效结束)
v-leave(动效开始之前)>------>------>------>v-leave-to(动效结束)

这两个表示一个来回，第一次点击运行第一个v-enter,第二次点击运行v-leave，这样有来有回就产生动效。

两个动效一般都不会在类名里面写transition：all .3s；这种来控制动效时间，他们都有一个通用的类名，在开始到结束一直存在的：

v-enter-active 第一次的
v-leave-active 第二次的
这两个主要存放动效的transition属性

假设我们要做一个opacity的过渡，我们要这样写

.v-enter {
  opacity:0;
}
.v-enter-to {
  opacity:1;
}
.v-enter-active {
  transition: opacity 1s ease;
}

这样写表示第一个流程，第二个流程实际上就是反过来，css就没必要重新写了，直接共用

.v-enter,.v-leave-to {
  opacity:0;
}
.v-enter-to,.v-leave {
  opacity:1;
}
.v-enter-active,.v-leave-active {
  transition: opacity 1s ease;
}

那么这里一个动效类名就写好了，实际上这个类名就是vue默认调用的一个类名，也就是如果你没有指定transition元素name属性，他就会默认使用这个类名作为切换的效果。

注意：过渡的是active记得要写在最后，让他的css权限比enter，leave大，以免过渡时这两个里面写了transition属性造成动效出现问题！

实际上这个css还可以继续简写，我们元素默认就是显示的，不管opacity为1，他也是显示的，除非你设置为0，那么vue操作类名的时候不会像jq一样，操作完结束时是什么，元素上就是什么，vue会将class类名全部清除掉，就好像动效之后什么都没有发生，那么我们甚至可以不写结束时的类名。

首先我们看下流程：

第一次点击，元素先添加了.v-enter，瞬间将元素设置为动效开始前的状态，此时元素透明为0，然后移除.v-enter，接着添加.v-enter-active和v-enter-to通过active产生动效，当他达到1时，class被清除。

第二次点击，也是一样。

那么由于元素本身就是现实的，移除opacity，不设置动效结束时opacity为1，在active的影响下元素也会发生透明度动效。

以上就是class类名的理解，然后就是自定义类名了，因为我们不可能都是使用默认的吧！

自定义类名

transition有一个name属性，它的值可以为自定义的class类名，比如name=“fade”

然后我们创建一个fade的cass效果

.fade-enter,.fade-leave-to {
  opacity:0;
}
.fade-enter-to,.fade-leave {
  opacity:1;
}
.fade-enter-active,.fade-leave-active {
  transition: opacity 1s ease;
}

实际上我们只需要把之前的class类名v改为我们自己的name值，然后就可以了，vue会自动补全后面的值，因为后面的都是固定的，所以在设置的时候，只需要name=“fade”即可。

动态绑定动效名

只要为transition的name绑定一下就行了

<transition :name="transitonName"></transition>

绑定后他会去获取data里面的transitonName的值，当我们修改了它的transitonName的值时，transition的name值也会发生变化，这样就可以做到随心变化了，我们只需要设置好css效果然后添加就行了，每次只用改data里面的值，这样就不用在繁多的transition中一个个修改。

引入animate动画库

css动画库有一个比较有名的，就是animate.css了，vue可以通过引入这个css文件然后使用它提供的动画效果。

animate官网

下载后在head里link引入这个css文件，然后在vue的transition元素上添加一下是哪个属性：

1. enter-active-class 表示第一次动画效果
2. leave-active-class 表示第二次动画效果
3. :duration 表示动画的时间

<transition 
  enter-active-class="animated bounceIn"
  leave-active-class="animated bounceIn"
  :duration="{enter: 500, leave: 800 }"
  >
     <div v-show="show"></div>
</transition> 

enter-active-class和leave-active-class如果引入的是animate.css前面一定要加上animated专门的class类名。

animated这个类名实际上就是设置了动画的时间以及循环次数，一般来说官方在每个动画class上都预设好了对应的时间，懒人就可以直接用，所以我测试不写这个的话，也没什么问题。

而:duration也可以不用，因为css里面都设置好了时间，如果你想调整时间又不想去动css，那就直接使用这个属性，该属性的值有两种方式：

:duration="{enter: 500, leave: 800 }"
//这种表示enter的用时，leave的用时，单位s

:duration="500"
//这种表示enter和leave都是500s

以上就是引入第三方动画库的使用教程。

详解transition标签

transition除了支持以上那些属性外，还有几个属性值得一看：

1. appear
2. mode

appear是一个单属性，表示transition里的子元素第一次渲染是是否使用动画效果，默认是不显示动画效果的。

<transition appear
  enter-active-class=" bounceIn"
  leave-active-class=" bounceIn"
  >
    <div v-show="show"></div>
     
</transition> 

mode表示动画的过渡顺序，如果transition里面有v-if/v-else，他们的动画触发是同时存在的，也就是同时发生，这就会造成一些问题，比如我想让这个按钮先消失，另一个才出来，于是便要用到mode了

有两个个值：

1. out-in 表示隐藏/消失的元素动画先运行，在运行显示的动画
2. in-out 表示先运行显示的元素动画，隐藏/消失的在之后运行

<transition name="fade" mode="out-in">
  <!-- ... the buttons ... -->
</transition>

函数钩子

transition也可以使用纯js来操作动效，这里就要用到函数钩子，每个钩子就好像class的类名一样，什么状态做什么操作，所有的操作方法全部写在vue对象实例的methods对象里面。

首先说一下有哪些钩子

1. beforeEnter 动画开始之前的初始状态
2. enter 动画进行中的状态
3. afterEnter 动画完成后状态
4. enterCancelled 进入过渡被打断时
5. beforeLeave 第二次动画开始前的初始状态
6. leave 第二次动画进行中的状态
7. afterLeave 第二次动画完成后的状态
8. leaveCancelled 动画过渡被打断的状态

为了更方便理解我想到一个理解方式，你可以把enter作为显示时调用的动画，leave作为隐藏是调用的动画，之前的那些动画运行的类名也可以这么认为。

html写法：

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
  >
    <div v-show="show"></div>
</transition>

js

var app = new Vue({
    el: '#app',
    data: {
        show: true
    },
    methods: {
        beforeEnter(el) {
            console.log('show动画开始前', el)
        },
        enter(el) {
            console.log('show动画进行中', el)
        },
        afterEnter(el) {
            console.log('show动画结束后', el)
        },
        enterCancelled(el) {
            console.log('show动画被打断', el)
        },
        beforeLeave(el) {
            console.log('hide动画开始前', el)
        },
        leave(el) {
            console.log('hide动画进行中', el)
        },
        afterLeave(el) {
            console.log('hide动画结束后', el)
        },
        leaveCancelled(el) {
            console.log('hide动画被打断', el)
        }
    }
});

每个绑定的对应的函数都 有一个参数，这个参数就是动画元素本身的dom元素。

在实际测试中被打断的状态一直没测试出来，所以这两个用不到，以后碰到了再单独讲讲，在元素显示和隐藏是这几个钩子函数会依次运行，开始---进行---结束，通过el参数进行原生的js改动样式。

(稍微看了下，打断的触发，在v-if时是不会触发的，而在v-show时便会触发，主要区别就是当元素还在进行过渡是改变的绑定的show的值，true改为false，v-if会继续执行未完成的动画，比如先true，瞬间又改为false，那么元素会从show动画执行完再执行hide动画，再移除元素，而v-show则是show动画停止了，被打断，然后马上执行hide动画，再display:none!实际测试硬是没感觉出来，也没触发到，用处不大)

但是实际上，即便我们写了钩子函数，没有填写name属性，vue也会默认添加默认的class类名v-enter这些，所以如果你想你的动效全部都交给js来做，记得添加一个name=“xxxxx”的无意义命名，只要这个类名css中没有写过样式就行，这样就是可以全权交由js负责了。

js动画库

我找到一个开源的js动画库，但是目前还没搞清楚怎么使用，先分享出来

anijs.js

vue2.0新增加的动画函数钩子

我们之前讲过appear可以让元素在第一次渲染时，也就是第一次show的时候触发动画效果，那么2.0也更新的对应的钩子。

1. before-appera 初次显示前的初始状态
2. appera 初次显示中
3. after-appear 初次显示结束

一共就三个，使用方法和之前的钩子函数一样，通过v-bind绑定methods中对应的函数，然后el的原生dom参数，js控制。

transition-group

一般来说，一个transition包裹一个元素，然后给该元素添加show、hide动效，但是我们可以通过v-if/v-else判断，可以让两个元素都可以使用该动画，但是这基本上就是“二龙不想见”，如果我们要有很多个元素怎么都用同一个动画，你不可能每个都用一个transition标签包裹吧！

所以这里就有了transition-group标签了，这个标签可以给他里面的元素添加统一的过渡样式。

样式设置和transition一样，只是没有了mode这个属性。

要求：

子元素都要有一个唯一的key值，我们知道v-for的时候可以用index数组下标作为它唯一的key值，如果不是v-for你其实可以瞎鸡儿编的，只要key值唯一就行，你纯字符也行啊。

transition-group支持一个tag的属性，tag="ul"表示所有的子元素将被ul元素包裹，实际上就是把transition-group标签替换成ul了，通这个属性可以自由控制包裹的父元素。

<transition-group tag="ul" name="fade" appear>
  <li v-for="(item,index) in items" :key="index">{{item.text}}</li>
</transition-group>

var app = new Vue({'
  el : '#app',
  data : {
    items : [
      {id:1,text:"第一个"}，
      {id:2,text:"第二个"}
      {id:3,text:"第三个"}
      {id:4,text:"第四个"}
     ]
  }
});

基本vue的过渡就到这里了，以后有机会再来实践！