关闭

Vue 动画的封装

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

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

.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 @keyframes属性 语法

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

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

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

css3常用动画+动画库

animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。Effect.css 针对不同UI的CSS3动画和过渡效果集,包含了丰富的CSS3动画和过渡效果,Hover.css是一套使用CSS3动画实现的Hover特效集锦

为何 Canvas 内元素动画总是在颤抖?

在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的

CSS动画@keyframes的用法

CSS动画允许大多数HTML元素的动画,而无需使用JavaScript或Flash!IE10+支持该属性的。其他低浏览器版本数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。

Flutter实现抽屉动画效果

这篇会深化View拖拽实例,利用Flutter Animation、插值器以及AnimatedBuilder教大家实现带动画的抽屉效果。通过构思,我们可以设想到实现抽屉的方式就是用Stack控件将两个Widget叠加显示,用GestureDetector监听手势滑动

Transform(CSS动态属性的开始)

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

css transition 实现滑入滑出

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

CSS3的变形、过渡、动画、关联属性

transform:可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix;transition-property:过度的属性;animation-name:动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义

css3实现椭圆轨迹旋转

X轴Y轴在一个矩形内移动;设置动画延时设置Y轴延时为动画时长的一半, 运动轨迹变成菱形;设置三次贝塞尔曲线,为了看起来有立体感添加scale属性,scale动画应该是X轴和Y轴的时间总和

点击更多...

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