【九月打卡】第4天 【2022版】Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战 第五讲

课程名称： Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程章节： Vue 中的动画特效

主讲老师： Dell

课程内容：

今天学习的内容包括：

Vue中动画效果

过渡动画

keyframe动画

animate.css动画库

velocity.js动画库

多个元素/组件过渡效果

列表渲染过渡效果

动画封装

课程收获：

5.1 心得：

vue中css动画的原理

1、显示

• 会给DOM节点添加class----enter、enter-active，
• 会移除enter 添加上 enter-to
• 移除 enter-active，enter-to

.fade-enter {
    opacity: 0;
 }
 .fade-enter-active {
     transition: opacity 3s;
 }

注意：enter-active贯穿整个流程

2、隐藏

• 会给DOM节点添加class----leave、leave-active，
• 会移除leave 添加上 leave-to
• 移除 leave-active，leave-to

.fade-leave-to {
    opacity: 0;
 }
 .fade-leave-active {
     transition: opacity 3s;
 }

注意：enter-active贯穿整个流程

5.2 心得：

@keyframes规则创建动画

<transition name="fade"></transition>

Vue中使用keyframes：

@keyframes bounce-in {
    0% {
        transform: scale(0);
        }
    50% {
        transform: scale(1.5);
        }
    100% {
        transform: scale(1);
        }
}
.fade-enter-active {
    transform-origin: left center;    //transform-origin 属性允许您改变被转换元素的位置
    animation: bounce-in 1s;
    }
.fade-leave-active {
    transform-origin: left center;
    animation: bounce-in 1s;
    }

自定义动画类名：在<transition中定义>

<transition     
    name="fade"     
    enter-active-class="active"    //等价于.fade-enter-active
    leave-active-class="leave">
</transition>

当引入animate.css库后可以直接使用库的样式

https://daneden.github.io/animate.css

<transition     
    name="fade"     
    enter-active-class="animated swing"    
    leave-active-class="animated shake">
</transition>

5.3 心得：

在vue中同时使用过渡和动画

.fade-enter-active,.fade-leave-active{
    transition:opacity 3s;
}
<transition     
    name="fade"  
    type="transition" // 动画效果时长以transition为准
    :duration={enter:3000,leave:3000} // 自定义时长
    appear //   定义首次进入有动画效果
    enter-active-class="animated swing fade-enter-active"    
    leave-active-class="animated shake fade-leave-active"
    appear-active-class="animated swing"
    >
</transition>

页面首次进入画面

<transition appear appear-active-class='执行动画的名字'></transition>

页面刷新后动画：加入appear属性和.appear-class=“animate__animated 名字”

<transition
    appear
    appear-active-class="animate__animated animated__名字">

过渡效果+@keyframes： 在自定义类中加入.fade-enter-active和.fade-leave-active 控制时间：

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

设置动画时常：type=“transition” - 以transition的时长为基准

也可以自定义动画时长：:duration=“时间”

更复杂的设置：

<transition
    duration: "{enter: 5000, leave: 10000}">

Vue中的 Js 动画与 Velocity.js 的结合

<transition 
    @before-enter='handleBeforeEnter' // enter入场动画 还没开始执行的钩子
    @enter='handleEnter' //动画执行的钩子
    after-enter='handleAfterEnter'> //（done回调后使用）
</transition>

handleBeforeEnter:function(el){    // el是transition 包裹的div标签
    el.style.color = 'red'
},
handleEnter:function(el,done){    // el是transition 包裹的div标签
    setTimeout(()=>{
        el.style.color = 'green'
    },2000)
    setTimeout(()=>{
        done() //回调函数
    },4000)
},
handleAfterEnter:function(el){
    el.style.color = '#000'
}

leave–离场动画钩子同理

velocity 可以传三个参数（el,动画动作，{duration：‘时间’，compete：done–调起结束回调}）

5.4 心得：

动画钩子：@before-enter

<transition @before-enter="handleBeforeEnter">

handleBeforeEnter: function(el) { el.style.color = 'red'}

动画钩子：@enter

handleEnter: function(el，done) {
    setInterval(() = > {
        el.style.color = 'green'
    ), 2000}

回掉函数done，需要手动调用，表示动画执行完毕

handleEnter: function(el，done) {
    setInterval(() = > {
        el.style.color = 'green'
    ), 2000}
    setInterval(() = > {
        done();
    ), 2000}
}

done执行完毕后，vue再会执行一个函数@after-enter

handleAfter: function(el) {
    el.style.color = '#000'}

总结js动画钩子：

<transition
    @before-enter="handleBeforeEnter"
    @enter="handleEnter"
    @after-enter="handleAfterEnter"
>

出场动画：

<transition
    @before-leave="handleBeforeLeave"
    @leave="handleLeave"
    @after-leave="handleAfterLeave"
>

使用Velocity：

在handleEnter方法中加入

Velocity使el元素，透明度变成1，耗时1秒，执行完毕后，调用done函数，继续执行handleAfterEnter函数

handleEnter: function(el，done) {
    Velocity(el, {
        opacity: 1
    }, {duration: 1000,
        complete: done
    })
}

5.5 心得：

vue多个元素或组件过渡

1、多个元素过渡

<style>
    .v-enter,.v-leave-to{
        opacity: 0;
    }
    .v-enter-active,.v-leave-active{
        transition: opacity 2s;
    }
</style>

<transition mode="out-in">    // out-in 先隐藏在显示 , in-out 先显示在隐藏
        <div v-if="show" key='hello'>hello</div>    //防止dom元素复用，必须使用 key 值
        <div v-else key='bye'>bye bye</div >
</transition>
<button type="button" @click="change()">切换</button>

2、多个组件过渡

<transition mode="out-in">    
    <component :is="type"><component>    //动态组件方法
</transition>
<button type="button" @click="change()">切换</button>
<script>
data:{
    type:'child'
},
methods:{
    change:function(){
        this.type = this.type === 'child' ? 'child-one':'child'
    }
}
</script>

5.6 心得：

列表中的过渡：<transition-group>

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

<transition-group>
    <div v-for="item of list" :key="item.id">
    {{item.title}}
</transition-group>

data: {
    list: []
},
methods: {
    handleClick: function() {
        this.list.push({
            id: count++,
            title: 'hello World')}

相当于给每个div外面套了一层transition：

<transition>
    <div>Hello World</div>
</transition>
<transition>
    <div>Hello World</div>
</transition>
<transition>
    <div>Hello World</div>
</transition>
<transition>
    <div>Hello World</div>
</transition>

5.7 心得：

Vue中的动画封装通过组件进行封装<fade :show="show">

 <div>Hello Div!</div>
</fade>Vue.component('fade', {
    props: ['show'],    //接收show判断是否显示
    template: `
       <transition>
           <slot v-if='show'></slot>    //定义一个插槽接收父组件的内容
       </transition>
    `
})Vue.component('fade', {
    props: ['show'],
    template: `
       <transition
           @beforeEnter="handleBeforeEnter"
           @enter="handleEnter"
           @after-enter='handleAfterEnter'>
           <slot v-if='show'></slot>
       </transition>
    `,
    methods: {
        handleBeforeEnter: function(el) {
            el.style.color = 'red';
        },
        handleEnter: function(el, done) {
            setTimeout(() = > {
                el.style.color = 'green';
                done();
            }, 2000)
       handleAfterEnter:function(el){
            el.style.color = '#000'
        }
})