Vue动画封装的两种方式

        有两种方式封装动画效果css和js方式   

css封装动画

 首先使用css封装的方式实现封装组件动画(组件封装)

Vue.component('trans',{
    template:`
        <transition>
            <slot></slot>
        </transition>
    `,
})

    html中调用组件

<div id="app">
    <trans v-if="show"><h1>十月梦想</h1></trans>
    <button @click="get">get</button>
</div>

    vue实例调取的方法

var app=new Vue({
    el:"#app",
    data:{
        show:true
    }, methods:{
        get:function(){
            this.show=!this.show
        }
    }

})

    书写动画不同时段的css

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

    js封装动画(推荐)

定义组件

Vue.component('tran',{
    template:`
        <transition velocity>
            <slot @before-enter="beforeEnter" @enter="handleEnter" @after-enter="afterEnter"></slot>
        </transition>
    `,
    methods:{
        beforeEnter:(el)=>{
            el.style.opacity=0
            console.log('before')
        },
        handleEnter:(el,done)=>{
            Velocity(el,{opacity:1,color:'red'},{duration:5000},{complete:done()})
            // el.style.color="red";
            // done();
        },
        afterEnter:()=>{
            console.log('after')
        }
    }
})

    js方式我们需要引入之前的velocity.js,所需属性放入tempalate中,在模板的插槽中定义动画三个状态!

此时我们需要书写css的代码了!直接一个组件就能完整实现这个动画过渡效果!因此我们以后封装时候更加推荐这个js封装动画方式!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏别先生

Idea的快捷键,瞎摸索,开心就好,哈哈哈

前言:如果你有强迫症,换了一个编辑器,最痛苦莫过于快捷键,不顺手了。这里自己瞎摸索的快捷键,贴一下,这里主要以实际应用为主,因为大量介绍的网上已经很多很多,S...

30750
来自专栏十月梦想

移动端开发样式初始化

在移动端开发,需要解决在移动端下的一些样式初始化,防止在设备出现不同的效果,下面我们看下,需要解决移动端的那些样式需要初始化!

12020
来自专栏谦谦君子修罗刀

react-navigation,刷新你的导航一、属性介绍二、案例

在2017年1月,新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果,可能会成为未来RN导航组件中的主力军。该库包含三类组件: ...

2.2K90
来自专栏别先生

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

jQuery EasyUI学习网址:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuer...

647100
来自专栏大数据钻研

HTML基础复习(一)

HTML:超文本标记语言(HyperText Markup Language),不是一种编程语言,是标记语言 HTML元素: <p>段落</p> HTML标签:...

44760
来自专栏林德熙的博客

win10 uwp 右击浮出窗在点击位置

如果需要让 Flyout 显示在指定的位置,那么请看本文。 本文主要让 MenuFlyout 出现在我们右击位置。

11110
来自专栏姬小光

【第011期】如何区分页面上的图片和文字

在一个网页上,我们会看到有很多的图片,也有很多的文字。对于普通的用户,不需要去在意到底哪些是图片,哪些是文字。

14030
来自专栏欧科云

让你的网站文字“抖”起来

最近听说了一款挺火的软件,叫 “抖音”,发现它的标志有蓝红双色的叠加。我突然想到,我们的网站文字能否做出这个效果,甚至让文字像这个一样抖起来?答案当然是可以的。

11430
来自专栏Scott_Mr 个人专栏

React Native 系列(九) -- Tab标签组件

47990
来自专栏每日一篇技术文章

weex-16-image组件

DE2586BB-4A0A-4904-AA87-EF44A8A5BC74.png

10010

扫码关注云+社区

领取腾讯云代金券