在这里插入图片描述
@[toc]

3.25Vue封装的过度与动画

3.25.1知识点总结

在这里插入图片描述
在这里插入图片描述

3.25.2案例

在这里插入图片描述
<font color='red'>
注意点1:</font>最好有css动画基础,再练习这块,但我只是了解所以原封不动拷贝看效果就是,当了解即可。
<font color='red'>
【动画/过度】使用方式:</font>
<font color='red'>
1)</font>定义【动画/过度】样式名称
<font color='red'>
2)</font>用<transition>标签包裹起来要实现动画的元素

使用动画方式:
<transition name="hello" appear>
    <h1 v-show="isShow">你好啊!</h1>
</transition>

<style scoped>
    h1{
        background-color: orange;
    }

    .hello-enter-active{
        animation: atguigu 0.5s linear;
    }

    .hello-leave-active{
        animation: atguigu 0.5s linear reverse;
    }

    @keyframes atguigu {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>
使用过度方式:
<style scoped>
    h1{
        background-color: orange;
    }
    /* 进入的起点、离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%);
    }
    .hello-enter-active,.hello-leave-active{
        transition: 0.5s linear;
    }
    /* 进入的终点、离开的起点 */
    .hello-enter-to,.hello-leave{
        transform: translateX(0);
    }
</style>

<font color='red'>注意点2:</font>动画效果来和去只写一个就行,另一个效果直接反转动画就是

<font color='red'>注意点3:</font>vue要求你想让谁实现动画效果,你就用<transition>标签把它包裹起来

<transition name="hello" appear>
    <h1 v-show="isShow">你好啊!</h1>
</transition>

<font color='red'>注意点4:</font>这个<transition>和<template>标签效果一样,最终页面都不会显示这个标签,它只作为包裹作用使用
在这里插入图片描述
<font color='red'>注意点5:</font>每个过度可以取名字,如果\<transition>定义了name属性值,那么class的样式名称前缀也得改名,不然无法自动识别,比如未定义name属性,那么类名叫.v-enter-active和.v-leave-active,如果定义了name属性name="hello",那么类名叫.hello-enter-active和.hello-leave-active,(即vue不跟动画进行对话,而是跟样式的名称进行对话。)

<transition name="hello" appear>
    <h1 v-show="isShow">你好啊!</h1>
</transition>

<style scoped>
    h1{
        background-color: orange;
    }

    .hello-enter-active{
        animation: atguigu 0.5s linear;
    }

    .hello-leave-active{
        animation: atguigu 0.5s linear reverse;
    }

    @keyframes atguigu {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

<font color='red'>注意点6:</font>

问题:想实现多个元素产生相同过度效果时,错误代码如下,运行发生了报错如图
<transition>
    <h1 v-show="!isShow" key="1">你好啊!</h1>
    <h1 v-show="isShow" key="2">尚硅谷!</h1>
</transition-group>

在这里插入图片描述
<font color='red'>答案:</font>报错说明\<transition>标签只能用于一个元素,如果想实现多个元素相同效果,请使用\<transition-group>标签。

问题:如果改成使用\<transition-group>标签后,运行还是报错了,感觉更严重了,下面两个过度一个都没显示,且还报错了。

<font color='red'>答案:</font>正确写法就是必须指定key值,这块在讲解v-for的时候着重强调要定义key的属性。
在这里插入图片描述
<font color='red'>注意点7:</font>Test3.vue使用第三方库animate.css,所以需要额外安装animate.css
<font color='red'>使用步骤:</font>
<font color='red'>1)</font>安装 npm install --save animate.css
<font color='red'>2)</font>引入 import 'animate.css'
<font color='red'>3)</font>使用3个标签即可实现【动画/过度】效果,发别是name、enter-active-class、leave-active-class,使用第三方库比较方便,就不用像Test1.vue和Test2.vue中定义一堆动画或过度\<style>标签内容

项目结构

在这里插入图片描述

main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
})
App.vue
<template>
    <div>
        <Test/>
        <Test2/>
        <Test3/>
    </div>
</template>

<script>
    import Test from './components/Test'
    import Test2 from './components/Test2'
    import Test3 from './components/Test3'

    export default {
        name:'App',
        components:{Test,Test2,Test3},
    }
</script>
Test.vue
<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="hello" appear>
            <h1 v-show="isShow">你好啊!</h1>
        </transition>
    </div>
</template>

<script>
    export default {
        name:'Test',
        data() {
            return {
                isShow:true
            }
        },
    }
</script>

<style scoped>
    h1{
        background-color: orange;
    }

    .hello-enter-active{
        animation: atguigu 0.5s linear;
    }

    .hello-leave-active{
        animation: atguigu 0.5s linear reverse;
    }

    @keyframes atguigu {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>
Test2.vue
<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition-group name="hello" appear>
            <h1 v-show="!isShow" key="1">你好啊!</h1>
            <h1 v-show="isShow" key="2">尚硅谷!</h1>
        </transition-group>
    </div>
</template>

<script>
    export default {
        name:'Test',
        data() {
            return {
                isShow:true
            }
        },
    }
</script>

<style scoped>
    h1{
        background-color: orange;
    }
    /* 进入的起点、离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%);
    }
    .hello-enter-active,.hello-leave-active{
        transition: 0.5s linear;
    }
    /* 进入的终点、离开的起点 */
    .hello-enter-to,.hello-leave{
        transform: translateX(0);
    }

</style>
Test3.vue
<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="hello" appear>
            <h1 v-show="isShow">你好啊!</h1>
        </transition>
    </div>
</template>

<script>
    export default {
        name:'Test',
        data() {
            return {
                isShow:true
            }
        },
    }
</script>

<style scoped>
    h1{
        background-color: orange;
    }

    .hello-enter-active{
        animation: atguigu 0.5s linear;
    }

    .hello-leave-active{
        animation: atguigu 0.5s linear reverse;
    }

    @keyframes atguigu {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

本人其他相关文章链接

1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章:vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》:使用vue脚手架创建项目

5.vue2知识点:数据代理

6.vue2知识点:事件处理

7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)

8.vue2知识点:计算属性与监听属性

9.vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)

10.vue2知识点:非单文件组件和单文件组件

11.vue2知识点:组件is属性

12.vue2知识点:组件模板定义

13.vue2知识点:组件的props属性、非props属性、props属性校验

14.vue2知识点:组件自定义事件

15.vue2知识点:组件插槽分发

16.vue2知识点:动态组件

17.vue2知识点:混入

18.vue2知识点:浏览器本地缓存

19.vue2知识点:全局事件总线(GlobalEventBus)

20.vue2知识点:消息订阅与发布

21.vue2知识点:nextTick语法

22.vue2知识点:Vue封装的过度与动画

23.vue2知识点:路由

24.vue2知识点:vm调用待$命令介绍

25.vue组件通信案例练习(包含:父子组件通信及平行组件通信)

26.vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解

27.vue2基础组件通信案例练习:待办事项Todo-list案例练习

28.vue2基础组件通信案例练习:把案例Todo-list改写成本地缓存

29.vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件

30.vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线

31.vue2基础组件通信案例练习:把案例Todo-list改成使用消息订阅与发布

32.vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮

33.vue2基础组件通信案例练习:把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结


刘大猫
6 声望1 粉丝

如果有天突然发现路的尽头还是路的话,希望你还没错过太多沿路的风景和眼前珍惜的人。