Vue.javascript源码分析(二十八)高级应用transition组件详解

春风如梦风过无痕,只为心的思念,遥寄一份浓浓的祝福。决不能习惯失败,因为你要知道,身体的疲惫,不是真正的疲惫;精神上的疲惫,才是真的劳累。

transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性:

name   用于自动生成CSS过渡类名 例如:name:'fade'将自动拓展为.fade-enter,.fade-enter-active等 appear  是否在初始渲染时使用过渡 默认为false css    是否使用 CSS 过渡类。 默认为 true。如果设置为 false,将只通过组件事件触发注册的 JavaScript 钩子。 mode  控制离开/进入的过渡时间序列 可设为"out-in"或"in-out";默认同时生效 type  指定过渡事件类型    可设为transition或animation,用于侦听过渡何时结束;可以不设置,Vue内部会自动检测出持续时间长的为过渡事件类型 duration 定制进入和移出的持续时间  以后用到再看

type表示transition对应的css过渡类里的动画样式既可以用transition也可以用animation来设置动画(可以同时使用),然后我们可以用指定,Vue内部会自动判断出来

除了以上特性,我们还可以设置如下特性,用于指定过渡的样式:

appear-class    初次渲染时的起始状态 ;如果不存在则等于enter-class属性  这三个属性得设置了appear为true才生效 appear-to-class    初次渲染时的结束状态 如果不存在则等于enter-to-class 属性 appear-active-class 初次渲染时的过渡     如果不存在则等于enter-active-class属性 enter-class      进入过渡时的起始状态 enter-to-class   进入过渡时的结束状态 enter-active-class 进入过渡时的过渡   leave-class   离开过渡时的起始状态 leave-to-class   离开过渡时的结束状态 leave-active-class 离开过渡时的过渡

对于后面六个class,内部会根据name拼凑出对应的class来,例如一个transition的name="fade",拼凑出来的class名默认分别为:fade-enter、fade-enter-to、fade-enter-active、fade-leave、fade-leave-to、fade-leave-active

除此之外还可以在transition中绑定自定义事件,所有的自定义事件如下

before-appear    初次渲染,过渡前的事件 未指定则等于before-enter事件   appear   初次渲染开始时的事件 未指定则等于enter事件 after-appear    初次渲染,过渡结束后的事件 未指定则等于enter-cancelled事件 appear-cancelled 初次渲染未完成又触发隐藏条件而重新渲染时的事件,未指定则等于enter-cancelled事件 before-enter     进入过渡前的事件 enter      进入过渡时的事件         after-enter    进入过渡结束后的事件 enter-cancelled   进入过渡未完成又触发隐藏条件而重新渲染时的事件 before-leave    离开过渡前的事件 leave     离开时的事件         after-leave    离开后的事件 leave-cancelled  进入过渡未完成又触发隐藏条件而重新渲染时的事件

transition相关的所有属性应该都列出来了(应该比官网还多吧,我是从源码里找到的),我们举一个例子,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
    <style>
        .fade-enter,.fade-leave-to{background: #f00;transform:translateY(20px);}         /*.fade-enter和.fade-leave-to一般写在一起,当然也可以分开*/
        .fade-enter-active,.fade-leave-to{transition:all 1s linear 500ms;}
    </style>
<body>
    <div id="app">
        <button @click="show=!show">按钮</button>
        <transition name="fade" :appear="true" @before-enter="beforeenter"  @enter="enter" @after-enter="afterenter" @before-leave="beforeleave" @leave="leave" @after-leave="afterleave">
            <p v-if="show">你好</p>
        </transition>        
    </div>
    <script>
        Vue.config.productionTip=false;
        Vue.config.devtools=false;
        var app = new Vue({
            el:"#app",
            data:{
                show:true
            },
            methods:{
                beforeenter(){console.log('进入过渡前的事件')},
                enter(){console.log('进入过渡开始的事件')},
                afterenter(){console.log('进入过渡结束的事件')},
                beforeleave(){console.log('离开过渡前的事件')},
                leave(){console.log('离开过渡开始的事件')},
                afterleave(){console.log('离开过渡结束的事件')}
            }
        })
    </script>    
</body>
</html>

到此这篇关于Vue.javascript源码分析(二十八)高级应用transition组件详解就介绍到这了。能走多远,能扛多重,在与你与谁同行。更多相关Vue.javascript源码分析(二十八)高级应用transition组件详解内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

vue如何实现列表固定列滚动

vue如何实现伸缩菜单功能

vue项目中canvas如何实现截图功能