Vue.js动画笔记_vue实现动画效果

更新日期: 2018-09-13阅读: 4.2k标签: 动画

1、vue.js中的元素动画或页面跳转动画有多种实现方式比如:

1、自己手动写css3动画来实现
2、使用第三方CSS动画库如:Animate.css 
3、在构子函数中操作dom 
4、使用第三方Js动画库如:Velocity.js  


2、Vue.js官方提供了默认的动画组件 transition ,例子:

<div id="demo">
    <button @click='show=!show'>切换</button>
    <transition name='fade'>       //将需要执行动画的元素包裹在transition标签中,并制定动画名称
        <p v-if='show'>Hello</p>
    </transition>
</div>

new Vue({
    el:'demo',
    data:{
        show:true
    }
})

.fade-enter-active,.fade-leave-active{
    transition:opacity .5s
}
.fade-enter,.fade-leave-to{
    opacity:0
}
transition执行:目标元素是否应用CSS过渡或动画(增删类名)-->调用构子函数


3、transition过渡的类名

状态A-->状态B
    v-enter:元素初始状态
    v-enter-to:动画结束后状态
    v-enter-active:动画过渡过程,用来定义动画时间、延迟、曲线函数
状态B-->状态A
    v-leave:返回动画执行前状态
    v-leave-to:返回动画执行后状态
    v-leave-active:返回动画过渡过程,用来定义动画时间、延迟、曲线函数
见官网图如下:( V 代表动画的类名)


4、使用CSS动画

<div id='demo'>
    <button @click='show=!show'>切换</button>
    <transition name='bounce'>
        <p v-show='show'>Hello</p>
    </transition>
</div>

new Vue({
    el:'#demo',
    data:{
        show:true
    }
})

.bounce-enter-active{
    animation:bounce-in .5s;
}
.bounce-leave-active{
    animation:bounce-in .5s reverse;
}

@keyframes bounce{
    0%{
        transform:scale(0)
    }
    50%{
        transform:scale(1.5)
    }
    100%{
        transform:scale(1)
    }
}


5、使用第三方CSS动画库 Animate.css

通过以下特性自定义过渡类名(可结合第三方CSS库):
    enter-class
    enter-to-class
    enter-active-class
    leave-active
    leave-to-class
    leave-active-class
    
<div id='demo'>
    <button @click='show=!show'>切换</button>
    <transition name='custom-classes-trandition' enter-active-class='animated tada' leave-active-class='animated bounceOutRight'>
       <p>Hello</p>
    </transition>
</div>

new Vue({
    el:'demo',
    data:{
        show:true
    }
})


6、动画过渡时间

<transition :duration="1000">...</transition>    //设置1000毫秒时间
<transition :duration="{enter:500,leave:800}">...</transition>    //设置进入时间和回退时间


7、Vue.js的JavaScript动画构子函数

<transition @before-enter='beforeEnter'
            @enter='enter'
            @after-enter='afterEnter'
            @enter-cancelled='enterCancelled'
            
            @before-leave='beforeLeave'
            @leave='leave'
            @after-leave='afterLeave'
            @leave-cancelled='leaveCancelled'
            :css='false' >         
</transition>
//对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false",Vue 会跳过 CSS 的检测

methods:{
    beforeEnter:function(el){},
    enter:function(el,done){
        done();  //当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调   
    },
    afterEnter:function(el){},
    enterCancelled:function(el){},
    beforeLeave:function(el){},
    leave:function(el){
        done();
    },
    afterLeave:function(el){},
    leaveCancelled:function(el){}
}
//钩子函数可以结合 CSS transitions/animations 使用,也可以单独使用


8、使用第三方JavaScript动画库Velocity.js

<div id="demo">
    <button @click="show = !show">切换</button>
    <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false" >
        <p v-if="show">Hello</p>
    </transition>
</div>

new Vue({
    el: '#demo',
    data: {
        show: false
    },
    methods: {
        beforeEnter: function (el) {
            el.style.opacity = 0
            el.style.transformOrigin = 'left'
        },
        enter: function (el, done) {
            Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
            Velocity(el, { fontSize: '1em' }, { complete: done })
        },
        leave: function (el, done) {
            Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
            Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
            Velocity(el, {
                rotateZ: '45deg',
                translateY: '30px',
                translateX: '30px',
                opacity: 0
            }, { complete: done })
         }
     }
})


9、通过 appear 特性设置节点在初始渲染的过渡

<transition appear> </transition>

自定义过渡类名:
<transition appear
    appear-class="custom-appear-class"
    appear-to-class="custom-appear-to-class"
    appear-active-class="custom-appear-active-class">
</transition>

自定义JavaScript构子:
<transition appear
    @before-appear='BeforeAppearHook'
    @appear='AppearHook'
    @after-appear='AfterAppearHook'
    @appear-cancelled='AppearCancelledHook'>
</transition>


10、多个元素的过渡(使用key)

<transition>
    <button :key="docState">
        {{ buttonMessage }}
    </button>
</transition>

computed: {
    buttonMessage: function () {
        switch (this.docState) {
            case 'saved': return '编辑'
            case 'edited': return '保存'
            case 'editing': return '取消'
        }
    }
}

过渡模式
    out-in  当前元素先进行过渡,完成之后新元素过渡进入
    in-out  新元素先进行过渡,完成之后当前元素过渡离开
<transition name="fade" mode="out-in"> </transition>


11、多个组件的过渡(使用动态组件)

<transition name="component-fade" mode="out-in">
    <component v-bind:is="view"></component>
</transition>

new Vue({
    el:'demo',
    data:{
        view:'v-a'
    },
    components:{
        'v-a':{
            template:`<div>组件A</div>`
        },
        'v-b':{
            template:`<div>组件B</div>`
        }
    }
})

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


12、<transition-group> 组件实现列表的过渡

<transition-group>组件会渲染成<span>标签,可通过 tag 特性更换为其他元素。
目标元素必须提供唯一的 key 值

<div id='demo'>
    <button @click='add'>添加</button>
    <button @click='remove'>删除</button>
    <button @click='shuffle'>打乱</button>
    <transition-group name='list' tag='div'>
        <span v-for='item in items' :key='item' class='list-item'>
            {{item}}
        </span>
    </transition-group>
</div>

//_.shuffl(arr) 随机打乱数组,并返回被打乱的数组
//arr.splice(index,0,item) 在index位置添加一个 item 元素
//arr.splice(index,1) 在index位置删除1个元素

new Vue({
    el:'demo',
    data:{
        items:[1,2,3,4,5,6,7,8,9],
        nextNum:10
    },
    methods:{
        randomIndex:function(){    //返回1~9之间的随机数
            return Math.floor(Math.random()*this.items.length)
        },
        add:function(){
            this.items.splice(this.randomIndex,0,nextNum++);    //在随机的位置添加一个数
        },
        remove:function(){
            this.items.splice(this.randomIndex,1);    //在随机的位置删除一个数
        },
        shuffle:function(){
            this.items=_.shuffle(this.items);    //返回顺序被打乱的数组
        }
    }
})

.list-item{
    transition:all 1s;
    display:inline-block;
    margin-right:10px;
}
.list-leave-active {
    position: absolute;
}
.list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
}


13、与JavaScript交互实现交错过渡(Velocity.js)

<div id='demo'>
    <input v-model='query'>    //根据用户输入筛选显示列表中符合项+动画
    <transition-group name='fade' tag='ul' :css='false' @before-enter='beforeEnter' @enter='enter' @leave='leave'>
        <li v-for='(item,index) in items' :key='item.msg' :data-index='index'>
            {{item.msg}}
        </li>
    </transition-group>
</div>

new Vue({
    el:'#demo',
    data:{
        query:'',
        list:[
            {msg:'then'},
            {msg:'reject'},
            {msg:'undefiend'},
            {msg:'resolve'}
        ]
    },
    computed:{
        showList:function(){
            var vm=this;
            return this.list.filter(function(item){
                return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !==-1
            })
        }
    },
    methods:{
        beforeEnter:function(el){
            el.style.opacity=0;
            el.style.height=0;
        },
        enter:function(el,done){
            var delay=el.dataset.index*150;
            setTimeout(function(){
                Velocity(
                      el,
                      { opacity: 1, height: '1.6em' },
                      { complete: done }
                )
            }, delay)
        },
        leave:function(el,done){
            var delay = el.dataset.index * 150
            setTimeout(function () {
                Velocity(
                    el,
                    { opacity: 0, height: 0 },
                    { complete: done }
                )
            }, delay)
        }
    }
})


14、创建可复用的过渡

//任务:只需将需要实现动画的元素或列表放入该过渡组件中即可实现相应的动画
方式一:
Vue.component('my-special-transition', {
    template: '\
        <transition\
            name="very-special-transition"\
            mode="out-in"\
            v-on:before-enter="beforeEnter"\
            v-on:after-enter="afterEnter"\
        >\
            <slot></slot>\
        </transition>\
      ',
    methods: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
    }
})

函数组件更适合完成这个任务:
Vue.component('my-special-transition', {
    functional: true,
    render: function (createElement, context) {
        var data = {
            props: {
                name: 'very-special-transition',
                mode: 'out-in'
            },
            on: {
                beforeEnter: function (el) {
                  // ...
                },
                afterEnter: function (el) {
                  // ...
                }
            }
        }
        return createElement('transition', data, context.children)
    }
})


15、动态过渡(根据组件的状态设置不同的过渡动画)

数据。这意味着,可以根据组件的状态通过 JavaScript 过渡设置不同的过渡效果 //最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话,唯一的限制是你的想象力。" title="" data-original-title="复制">
<transition :name="transitionName"> </transition>
//通过事件的钩子函数方法,可以在获取到相应上下文数据。这意味着,可以根据组件的状态通过 JavaScript 过渡设置不同的过渡效果
//最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话,唯一的限制是你的想象力。


来源:https://segmentfault.com/a/1190000016366877

链接: https://fly63.com/article/detial/1077

纯CSS3实现各种表情动画

CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画

新手引导动画的4种实现方式

尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素

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

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

前端开发常用css动画代码

常用的CSS动画效果,在实际开发中经常需要用到移动、大小、闪烁、渐显、渐隐等动画效果,这篇文章就整理了些常见的动画效果分享给大家,一遍收藏使用。

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

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

css transition 实现滑入滑出

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

动画函数的绘制及自定义动画函数

制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢

超酷的CSS3 loading预加载动画特效

这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下

Vue 动画的封装

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

Vue 中 JS 动画与 Velocity.js 的结合

前面学习了用css实现动画效果,那 Vue 中能不能用js实现动画效果呢?其实 Vue 提供了很多动画钩子,入场动画钩子函数有before-enter、enter、after-enter,与入场动画对应的出场动画钩子函数有before-leave、leave、after-leave。它们的用法与入场动画用法一样

点击更多...

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