第4章 Vue 过渡和动画

最新推荐文章于 2023-03-31 19:08:05 发布

Earnest～

最新推荐文章于 2023-03-31 19:08:05 发布

阅读量416

点赞数 1

分类专栏： Conclusion(总结) 文章标签： vue

本文链接：https://blog.csdn.net/qq_43763494/article/details/110342065

版权

Conclusion(总结) 专栏收录该内容

34 篇文章 21 订阅

订阅专栏

第4章 Vue 过渡和动画

文章目录

第4章 Vue 过渡和动画

4.1 过渡和动画基础

transition 组件

$注意\ transition\ 同一时间只能显示一个元素$

把需要添加过渡的 div 放入其中，用 name 设置前缀（默认前缀是 v）

<transition name='box'>
	<div class='chart' v-if='isShow'></div>
</transition>

初始状态

<style>
    .chart {
        width: 200px;
        height: 50px;
        background-color: orangered;
    }
    .box-enter-active, .box-leave-active {
        transition: width 3s;
    }
    .box-enter, .box-leave-to {
        width: 0px;
    }
    .box-enter-to, .box-leave {
        width: 200px;
    }
</style>

自定义类名

$通过属性来设置（自定义类名结合\ animate.css\ 动画库）$

<transition enter-active-class='animated bounceInLeft'
    leave-active-class='animated bounceOutLeft'>
    <p v-if='isShow'>hello world</p>
</transition>

$appear\ 初始渲染动画（每次刷新页面）$

<link rel="stylesheet" href="animate.css">
<transition appear appear-class='animated swing'
appear-to-class='animated bounceIn'
appear-active-class='animated bounceOut'>
    <div v-if='isShow's>过渡文字</div>
</transition>

使用@keyframes 创建 CSS 动画

$动画和过渡的区别就在于，动画可以改中间内容，一帧一帧的改$

<style>
    /* .bounce */
    .box-enter-active {         
        animation: Ami 2.5s;	/* 动画时间 */
    }
    .box-leave-active {
        animation: Ami 2.5s;
    }
    @keyframes Ami {
        0% {transform: scale(0); background: orangered;}
        20% {transform: scale(1); background: burlywood;}
        40% {transform: scale(1.25); background: blue;}
        60% {transform: scale(1.3); background: burlywood;}
        80% {transform: scale(1.25); background: orangered;}
        100% {transform: scale(1); background: orange;}
    }

Vue 结合 Velocity.js 实现动画

$和\ Velocity.js$

<script src="velocity.js"></script>

<transition @before-enter='beforeEnter' @enter='enter' 
@leave='leave' v-bind:css='false'>
    <p v-if='isShow'>demo 05</p>
</transition>

<script>
methods: {
    beforeEnter(el) {
        el.style.opacity = 0
        el.style.transformOrigin = 'left'    // 旋转元素的基点位置
        el.style.color = 'red'
    },
    enter(el, done) {
        Velocity(el, {opacity: 1, fontSize: '1.4em'}, {duration: 300})  // duration 执行时间
        Velocity(el, {fontSize: '1em'}, {complete: done})
    },
    leave(el, done) {
        Velocity(el, {translateX: '15px', rotateZ: '50deg'}, {duration: 3000})
        Velocity(el, {rotateZ: '100deg'}, {loop: 2})    // 重复 2 次
        Velocity(el, {rotateZ: '45deg', translateY: '30px', translateX: '30px',
            opacity: 0}, {complete: done})
    }
}	// 哦，天爷，自己琢磨吧。。（这个 velocity 用的是老版本的）

使 Vue 跳过 CSS 的检测

v-bind:css="false"

4.2 多个元素过渡

不同签名元素的过渡

$用\ v-if\ 和\ v-else$

<transition>
    <div v-if='1 > 0'>div</div>
    <p v-else>p</p>
</transition>

相同签名元素的过渡

$需要\ key，不然无法区分相同签名的元素$

<button @click='isShow = !isShow'>change isShow</button>
<transition name='fade'>
    <button v-if='isShow' key='save'>save</button>
    <button v-else key='edit'>edit</button>
</transition>

$通过改\ key\ 的值，实现按钮切换$

<button v-bind:key='isShow'>{{isShow ? 'true' : 'false'}} </button>

$还可以这样用\ v-if$

<div class="red" v-if="show == 'A'" key="A"></div>
<div class="blue" v-if="show == 'B'" key="B"></div>
<div class="yellow" v-if="show == 'C'" key="C"></div>
<script>
    showNum () {
        if (this.show == 'A') { return this.show = 'B' }
    } // 切换 show

$还可以用\ computed\ 计算属性$

{{showNum}}
computed: {
    showNum() {
        switch(this.isShow) {
            case 'A': return 'a'
// 不再赘述

过渡模式

$为实现有序过渡，加了\ mode\ 属性$

mode 属性有两个值：in-out 和 out-in，一般用 out-in，先出后进（即当前元素先过渡，然后新元素过渡进入）
<transition name='fade' mode='out-in'>
    <button v-bind:key='isOff' @click='isOff = !isOff'>
        {{isOff ? 'Off' : 'On'}}
    </button>
</transition>
// 用了 mode 和 out-in 以后，很丝滑

4.3 多个组件过渡

$不需要用\ key\ 特性，用动态组件即可（即\ is\ 属性）$

// 主要就是用的 is 切换的组件
<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s ease;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>
<body>
    <div id='app'>
        <a href="javascript:;" @click='compontentName="example1"'>login</a>
        <a href="javascript:;" @click='compontentName="example2"'>register</a>
        <transition name='fade' mode='in-out'>
            <component v-bind:is='compontentName'></component>
        </transition>
    </div>
    <template id='ex1'> <span>login component</span> </template>
    <template id='ex2'> <span>register component</span> </template>
    <script>
        Vue.component('example1', {template: '#ex1'})
        Vue.component('example2', {template: '#ex2'})
        var vm = new Vue({
            el: '#app',
            data: { compontentName: '' }
        })
    </script>
</body>

4.4 列表过渡

前面的都是渲染单个元素或同时渲染多个元素中的一个，不适用于列表过渡

列表的进入和离开过渡

$列表过渡用\ v-for\ 和\ transition-group$

.list-item {
    display: inline-block; margin-right: 10px; background-color: orangered;
    border-radius: 50%; width: 25px; height: 25px; text-align: center;
    line-height: 25px; color: #fff;
}
.list-enter-active, .list-leave-active {
    transition: all 1s;
}
.list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(30px)
}

<transition-group name='list' tag='div'>
    <span v-for='item in items' v-bind:key='item' class='list-item'>
        {{item}}
    </span>
</transition-group>

data: {
    items: [1, 2, 3, 4, 5],
    nextNum: 6
},
methods: {
    randomIndex() {
        return Math.floor(Math.random() * this.items.length)    // 0-1 之间的随机数
    },
    add() {
        this.items.splice(this.randomIndex(), 0, this.nextNum++)    // 删除 0 个
    },
    remove() {
        this.items.splice(this.randomIndex(), 1)
    }
}

列表的排序过渡

$为了实现平滑过渡，用\ v-move\ (Vue\ 采用了\ FLIP\ 技术，动画更流畅)$

.list-leave-active {
    transition: all 1s;
    position: absolute;		// leave 这里要加一个绝对定位，否则不平滑
}
.list-move {
    transition: transform 1s;
}

效果图：

利用 lodash.js 实现洗牌功能

<script src="lodash.js"></script>

<script>
shuffle() {
    this.items = _.shuffle(this.items)
}

效果图：

列表的交错过渡

$钩子函数结合\ Velocity.js\ 实现搜索功能$

<input type="text" placeholder="please enter what you are looking for:" v-model='query'>
<transition-group name='item' tag='ul' @before-enter='beforeEnter' @enter='enter'
@leave='leave' :css='false'>
    <li v-for='(item, index) in ComputedList' :key='item.msg' :data-index='index'>
        {{item.msg}}
    </li>
</transition-group>

<script>
data: {
    query: '',
    items: [
        {msg: 'zhangsan'}, {msg: 'lisi'}, {msg: 'zhangfangfang'},
        {msg: 'wanglinlin'}, {msg: 'fengyuan'}
    ]
},
computed: {
    ComputedList() {
        var content = this.query
        var nameList = this.items
        return nameList.filter(function (item) {
            return item.msg.toLowerCase().indexOf(content.toLowerCase()) !== -1
        })		// 利用计算属性 返回过滤后的列表（研究下这个 return）
    }
},
methods: {
    beforeEnter(el) {
        el.style.opacity = 0
        el.style.height = 0
    },
    enter(el, done) {
        var delay = el.dataset.index * 150
        setTimeout(function() {
            Velocity(el, {opacity: 1, height: '1.6em'}, {complete: done})
        }, delay)
    },
    leave(el, done) {
        var delay = el.dataset.index * 150
        setTimeout(function() {
            Velocity(el, {opacity: 0, height: 0}, {complete: done})
        }, delay)
    }
}
// 这样看来，写的时候可以只用三个钩子函数，就可以把进出的过渡写完（无 css 参与，用的 Velocity.js）
// 还是用 css 吧，只需给 v-enter-active & v-leave-active 写个 transition，
// 以及给 v-enter & v-leave-to 写个 opacity 即可

效果图：

可复用的过渡

$template\ 方式实现过渡的封装$

就是写组件模板里面，用插件 slot 显示列表

<fade :query='query' :items='items'>
    <li v-for='(item, index) in ComputedList' :key='item.msg' :data-index='index'>
        {{item.msg}}
    </li>
</fade>

<template id="temp">
    <transition-group name='item' tag='ul' @before-enter='beforeEnter' @enter='enter'
    @leave='leave' :css='false'>
        <!-- <li v-for='(item, index) in ComputedList' :key='item.msg' :data-index='index'>
            {{item.msg}}
        </li> 用 slot -->
        <slot></slot>
    </transition-group>
</template>

<script>
Vue.component('fade', {
    props: ['query', 'items'],
    template: '#temp',
    methods: {
        beforeEnter(el) {
            el.style.opacity = 0
            el.style.height = 0
        },
        enter(el, done) {
            var delay = el.dataset.index * 150
            setTimeout(function() {
                Velocity(el, {opacity: 1, height: '1.6em'}, {complete: done})
            }, delay)
        },
        leave(el, done) {
            var delay = el.dataset.index * 150
            setTimeout(function() {
                Velocity(el, {opacity: 0, height: 0}, {complete: done})
            }, delay)
        }
    }
})

$函数式组件方式，就是用\ rander\ 函数来实现$

改一下 script 的内容为如下即可，效果如前（用了 render）

<script>
Vue.component('fade', {
    functional: true,       // 标记 fade 组件为函数式组件
    props: ['query', 'items'],
    render(h, ctx) {
        var data = {
            props: {
                tag: 'ul',      // 默认 span
                css: false
            },
            on: {
                beforeEnter(el) {
                    el.style.opacity = 0
                    el.style.height = 0
                },
                enter(el, done) {
                    var delay = el.dataset.index * 150
                    setTimeout(function() {
                        Velocity(el, {opacity: 1, height: '1.6em'}, {complete: done})
                    }, delay)
                },
                leave(el, done) {
                    var delay = el.dataset.index * 150
                    setTimeout(function() {
                        Velocity(el, {opacity: 0, height: 0}, {complete: done})
                    }, delay)
                }
            }
        }
        return h('transition-group', data, ctx.children)
    }
})

$E n d .$