Vue过渡动画和自定义过渡前缀

[TOC]

## Vue过渡动画和自定义过渡前缀

点击[官方](https://vuejs.bootcss.com/guide/transitions.html)帮助文档查看Vue动画的详细介绍

### 过渡类名

Vue动画有2个时间段分别是进入时间段v-enter-active和离开时间段v-leave-active，4个时间点分别是待进入v-enter、已进入v-enter-to、待离开v-leave和已离开v-leave-to，4个时间点v-enter和v-leave-to的样式为一组，v-enter-to和v-leave为一组，4个时间点和2个时间段就是vue过滤的6个类名，v-enter和v-enter-to对应进入时间段v-enter-active，v-leave和v-leave-to对应离开时间段v-leave-active

### vue的动画标签transition

使用标签transition包裹需要动画的内容，在使用过渡类名添加动画样式，添加的动画样式控制transition内部元素实现动画

```HTML
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }

.v-enter-active,
        .v-leave-active {
            transition: all 0.8s ease;
        }

.mycustom-enter,
        .mycustom-leave-to {
            opacity: 0;
            transform: translateY(100px);
        }

.mycustom-enter-active,
        .mycustom-leave-active {
            transition: all 0.8s ease 0.5s;
        }
    </style>
</hred>
<div id="app">
    <input type="button" @click='flag=!flag' value="进入/离开">
    <transition>
        <div v-if="flag" :style="{width:'500px'}">我自带BGM</div>
        
    </transition>
    <transition name="mycustom">
        <div v-if="flag" :style="{width:'500px'}">我比楼上哥们帅</div>
    </transition>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            flag: false
        },
        methods: {}
    })
</script>

</html>
```

### 知识点

+ transition内部元素显示隐藏可以是使用v-if也可以是用v-show

+ transition里面只允许有一个根元素标签，如示例中去掉第二个h4的注释，在控制台中会抛出错误`<transition> can only be used on a single element. Use <transition-group>` for lists，如果动画是一组标签，也只能有一个根标签，其它的组成员需要作为子级元素被包裹在根元素里面。

+ transition标签中添加name=""属性实现自定义过渡类，设想如果不使用自定义的过渡类，那么两个过渡元素过渡的效果将一致，无法达到预期的效果，例如一个从右边进入，一个从下面进入，示例中给第二transition标签添加了name="mycustom"属性，从而实现了自定义过渡类，一个元素从右入，一个元素从下入

+ css3 transform属性translateX()值表示元素在X轴上的位置，translateY()值表示元素在Y轴上的位置

+ css3 transition属性transition-property，transition-duration，transition-timing-function，transition-delay四个值分别是过渡的元素属性的名称，过渡的花费的时间，过渡速度的变化，过渡等待多久开始，示例中简写transition: all 0.8s ease 0.5s 的意思就是标签上的所有属性在等待0.5s后按慢速开始然后快速最后慢速结束过渡，整个过渡从开始到结束需要0.8s