Vue笔记(11) - js动画和velocityjs、多组件、列表渲染

可以在属性中声明 JavaScript 钩子,然后钩子绑定事件处理程序,在事件处理程序中改变元素,以达到js实现动画。


  

例子:


        

hello

... methods: { beforeEnter: function(el) { // el指的就是transition标签包含的元素 console.log('js钩子beforeEnter', el); el.style.color = 'red' }, // 其中调用done函数后就会触发after-enter钩子,所以就会执行afterEnter函数。 enter: function(el, done) { setTimeout(() => { el.style.color = 'green' }, 2000) setTimeout(() => { done() }, 4000) }, afterEnter: function(el) { el.style.color = 'orange' } }

事件处理程序中的动画,我们可以使用velocityjs这个库,而不用自己写。

enter: function(el, done) {
// 第一个参数为元素,第二个元素是改变的属性,在第三个参数为配置,
// 当动画执行完毕后,complete对应的回调函数会被执行。然后进入after-enter
                Velocity(el, {
                    opacity: 1
                }, {
                    duration: 1000,
                    complete: done
                })
            },
(2)多元素的过渡
    
      
hello world
bye world

当transition标签中包含多个元素时,动画不会起效果,因为vue中的元素复用功能,这时候可以给元素加上key属性。
transition标签的mode属性可以设置先隐藏在显示,还是显示了再隐藏。


        
hello world
bye world
out-in:先隐藏要隐藏的元素,再显示要显示的元素。 in-out:相反。
(3)多组件的过渡

        
        

...
        Vue.component('child-one', {
            template: '
child-one
' }) Vue.component('child-two', { template: '
child-two
' })

也可以用动态组件:


        
      
      
      
...
new Vue({
     el: '#demo',
    data: {
        type: 'child-one'
    },
    methods: {
        toggle: function() {
                this.type = this.type=='child-one' ? 'child-two' : 'child-one'
        }
    }
})
(5)列表的渲染

上面讲到的多元素、多组件,因为条件控制所以最终显示的还是一个元素。
当我们想真正的包裹多个元素时,比如在v-for的元素中添加动画,试图用transition标签包裹时,当元素大于1,控制台就会报错:



因此我们要用到:transition-group


            
{{item.title}}

上面的原理是:它会给每一个v-for出来的元素都加上一个标签,这样可以了。

你可能感兴趣的:(Vue笔记(11) - js动画和velocityjs、多组件、列表渲染)