Vue 动画的封装

时间: 2019-02-12阅读: 637标签: 动画

如何进行动画封装,让动画变的可复用,看下面代码

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

<div id="root">
    <transition name="fade">
        <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">toggle</button>
</div>

let vm = new vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick() {
            this.show = !this.show
        }
    }
})


上面代码是非常简单的,显示隐藏效果,在项目中,可以会用很多地方会用到这种效果,那我们该如何实现封装呢?

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

<div id="root">
    <transition name="fade">
        <div>hello world</div>
    </transition>
    <button @click="handleClick">toggle</button>
</div>

vue.component('fade',{
    props:['show'],
    template:`<transition name="fade">
                <slot v-if="show"></slot>
             </transition>`
})

let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick() {
            this.show = !this.show
        }
    }
})


使用要封装的内容写成组件,并用slot插槽接管组件内容,就能实现动画封装了。看下面代码:

<div id="root">
    <fade :show="show">
        <h1>hello world</h1>
    </fade>
    <fade :show="show">
        <div>hello world</div>
    </fade>
    <button @click="handleClick">toggle</button>
</div>


如果需求想把样式也一起封装该怎么实现呢?这里就要用到js动画了,看下面代码

<div id="root">
    <transition name="fade">
        <div>hello world</div>
    </transition>
    <button @click="handleClick">toggle</button>
</div>

Vue.component('fade',{
    props:['show'],
    template:`
        <transition name="fade"
                   @before-enter="handleBeforeEnter"
                   @enter="handleEnter"
                   @afterEnter="handleAfterEnter"
         >
            <slot v-if="show">hello world</slot>
        </transition>`,
    methods: {
        handleBeforeEnter(el){
            el.style.color = 'red'
        },
        handleEnter(el,done){
            setTimeout(()=>{
                el.style.color = 'green'
                done()
            },2000)
        },
        handleAfterEnter(el){
            setTimeout(()=>{
                el.style.color = 'blue'
            },2000)
        }
    }
})

let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick() {
            this.show = !this.show
        }
    }
})

上面代码用了js提供的钩子动画before-enter、enter、after-enter,用这种方法写,所有的动画都写在了组件里,外部只需要调用这个fade组件就可以了,也不需要全局去写一些样式了,这种动画的封装是比较推荐的一种动画封装,因为它可以把所有动画的实现完整的封装在一个组件中。

来自:https://segmentfault.com/a/1190000018130259


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1983

关闭

css transition 实现滑入滑出

transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。

css环形滚动_内容加载的环形滚动动画效果

创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可

transform 的副作用

transform是一些效果的集合,主要是移动、旋转、缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果。变形transform可以实现2D和3D两种效果。

jQuery动画效果

必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值:slow、fast 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称

HTML5模拟齿轮动画

这是一个基于HTML5的齿轮动画特效,我们将齿轮转动的物理学原理,转换为HTML5代码,在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高了

css3中动画有哪些属性?

通过CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。动画是使元素从一种样式逐渐变化为另一种样式的效果。那么在CSS中动画属性有哪些?

Js封装一个简单的动画函数

动画函数多个目标值之间移动,1、如果是正值,则向大取整 2、如果是负值,则向小取整。清除定时器,是指清除谁的定时器,这里是轮播图,所以清除元素的定时器;创建定时器,清除定时器,页面中就没有定时器

为什么要用css动画替换js动画?

通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏览器会不停的执行重排和重绘,在PC版本的浏览器中,因为浏览器可用的内存比较大

css @keyframes属性 语法

@keyframes是CSS的一种规则,可以用来定义CSS动画的一个周期的行为,创建简单的动画。作用:通过 @keyframes 规则,您能够创建动画。

Transform(CSS动态属性的开始)

transform 属性向元素应用 2D 或 3D 转换;该属性允许我们对元素进行旋转、缩放、移动或倾斜。这两点是Transform的概念和应用场景,重点在于2D和3D的转换,那么呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!