Vue过渡和动画-基础

在项目中使用过渡和动画能提高用户体验和页面的交互性、影响用户的行为、影响用户的行为、引导用户的注意力以及帮助用户看到自己动作的的反馈。

例如，在单击“加载更多”时，加载动画能提醒用户等待，使其保持兴趣而不会感到无聊。

1.什么是过渡和动画

Vue在插入、更新或者移除DOM时，提供了多种过渡效果。

这里所说的过渡，简而言之，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态。

Vue提供了内置的过渡封装组件，即transition组件。

<transition>标签中用来放置需要添加过渡的div元素，使用name属性可以设置前缀，将name属性设为fade，那么”fade-“就是在过渡中切换的类名前缀，如

fade-enter、fade-leave等。

如果<transition>标签上没有设置name属性名，那么”v-“就是这些类名的默认前缀，如v-enter、v-leave等。

2.transition组件

Vue为<transition>标签内部的元素提供了3个进入过渡的类和3个离开过渡的类。

过渡状态	过渡类型	说明
进入(enter)	v-enter	进入过渡的开始状态，作用于开始的一帧
	v-enter-active	进入过渡生效时的状态，作用于整个过程
	v-enter-to	进入过渡的结束状态，作用于结束的一帧
离开(leave)	v-leave	离开过渡的开始状态，作用于开始的一帧
	v-leave-active	离开过渡生效时的状态，作用于整个过程
	v-leave-to	离开过渡的结束状态，作用于于结束的一帧

Vue

<div id="app">
<button @click = toggle>改变图形宽度</button>
<transition name="box">
<div class="chart" v-if="show"></div>
</transition>
</div>
<!-- 图形的初始状态 -->
<style>
.chart
{
width: 200px;
height: 200px;
background-color: orange;
}
/* 进入和离开的过程 */
.box-enter-active,.box-leave-active
{
transition: width 3s;
}
.box-enter,.box-leave-to
{
width: 0px;
}
/* 进入的结束状态和离开的初始状态 */
.box-enter-to,.box-leave{
width: 200px;
}
</style>
<script>
var vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
toggle(){
this.show = !this.show
}
}
})
</script>

3.自定义类名

Vue中的transition组件允许使用自定义的类名。

如果使用自定义类名，则不需要给<transition>标签设置name属性。

自定义类名是通过属性来设置的，具体属性：

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class

自定义类名的优先级高于普通类名，所以能够很好地与其他第三方CSS3库结合使用。

3.1.自定义类名结合animate.css实现动画

animate.css是一个跨浏览器的CSS3动画库，它内置了很多经典的CSS3动画，使用起来很方便。

Vue

<div id="app">
<button @click="show=!show">显示/隐藏</button>
<transition enter-active-class="animate__animated animate__bounceInLeft"
leave-active-class="animate__animated animate__bounceOutLeft">
<p v-if="show">过渡文字效果</p>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
}
})
</script>

3.2appear初始渲染动画

在元素初始渲染时添加动画效果可以通过给transition组件设置appear属性来实现。

Vue

<div id="app">
<button @click="show=!show">显示/隐藏</button>
<transition appear appear-active-class = "animate__animated animate__swing" enter-active-class="animate__animated animate__bounceInLeft" leave-active-class="animate__animated animate__bounceOutLeft">
<p v-if="show">过渡文字效果</p>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
}
})
</script>

4.使用@keyframes创建CSS动画

使用@keyframes创建CSS动画的用法与前面讲到的CSS过渡用法类似，区别在于动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationend(动画结束)事件触发时删除。

@keyframes规则创建动画，就是将一套CSS样式逐步演变成另一套样式，在创建动画过程中，可以多次改变CSS样式，通过百分比或关键词from和to(等价于0%和100%)来规定动画的状态。

Vue

<div id="app">
        <button @click="show=!show">使用@keyframes创建动画(默认方法)</button>
        <transition name="bounce">
            <div class="circular" v-if="show">圆形</div>
        </transition>
    </div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>
 <style>
        .circular {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            margin-top: 20px;
            text-align: center;
            line-height: 100px;
            color: #fff;

        }

        .bounce-enter-active {
            animation: Ami .5s;
        }

        .bounce-leave-active {
            animation: Ami .5s;
        }

        @keyframes Ami {
            0% {
                transform: scale(0);
                background: red;
            }

            20% {
                transform: scale(1);
                background: burlywood;
            }

            50% {
                transform: scale(1.5);
                background: darkgoldenrod;
            }

            100% {
                transform: scale(1);
                background: pink;
            }
        }
    </style>

5.钩子函数实现动画

Vue中除了使用CSS动画外，还可以借助JavaScript来完成动画。

在<transition>标签中定义了一些动画钩子函数，用来实现动画。

钩子函数可以结合CSS过渡、动画使用，还可以单独使用

Vue

<body>
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled"
        @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled">

    </transition>
</body>
<script>
    var vm = new Vue
        ({
            methods: {
                beforeEnter(el) { },
                enter(el, done) { done() },
                afterEnter(el) { },
                enterCancelled(el) { },
                beforeLeave(el) { },
                leave(el, done) { done() },
                afterLeave(el) { },
                leaveCancelled(el) { },
            },
        })
</script>

6.Vue结合Veloctity.js实现动画

Velocity.js是一个简单易用，高性能且功能丰富的轻量级JavaScript动画库，它拥有颜色动画，转换动画(transforms)、循环、缓动、SVG动画和滚动动画等特色功能。它支持Chaining链式动画，当一个元素连续应用多个Velocity()时，动画以列队方式执行

Vue                             <body> <div id="app"> <button @click="show=!show">动画效果</button> <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" v-bind:css="false"> <p v-if="show">文字动画效果 </p> </transition> </div> #39ADB5"></body> #39ADB5"><script> var vm = new Vue ({ el: '#app', data: { show: false }, methods: { beforeEnter(el) { el.style.opacity = 0 //透明度为0 el.style.transformOrigin = 'left' //设置旋转元素的基点位置 el.style.color = 'red' //颜色为红色 }, enter(el, done) { Velocity(el, { opacity: 1, fontsize: '1.4em' }, { duration: 300 }) Velocity(el, { fontsize: '1em' }, { complete: done }) }, leave(el, done) { Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 3000 }) Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete: done }) } }, }) #39ADB5"></script>

0px;" class="sharethis-inline-share-buttons" >