Vue学习：元素、组件、列表过度与动画封装

最新推荐文章于 2022-11-09 10:16:46 发布

Licheng Xu

最新推荐文章于 2022-11-09 10:16:46 发布

阅读量246

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43912883/article/details/102964474

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue学习：元素、组件、列表过度与动画封装

一、多个元素过度

1.1 点击切换，此时点击style中的动画并没有出现

由于Vue是尽可能的复用DOM元素，所以这时候动画并不会出现

        <style>
            .v-enter,.v-leave-to{
                opacity: 0;
            }
            .v-enter-active, .v-leave-active{
                transition: opacity 1s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="root">
                <transition>
                    <div v-if="show">hello derrick</div>
                    <div v-else>bye world</div>
                </transition>
                <button @click="handleClick">click</button>
            </div>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                }
            }
        })
    </script>

1.2 使用key表明DOM元素唯一

使用key表明了元素唯一之后，上下元素便不会复用，动画便可以使用

                <transition>
                    <div v-if="show" key="hello">hello derrick</div>
                    <div v-else key="bye">bye world</div>
                </transition>

1.3 mode参数设置属性切换效果

in-out：需要显示的元素先进去，需要隐藏的元素再隐藏

out-in：需要隐藏的元素先隐藏，需要显示的元素再显示

            <div id="root">
                <transition mode="in-out">
                    <div v-if="show" key="hello">hello derrick</div>
                    <div v-else key="bye">bye world</div>
                </transition>
                <button @click="handleClick">click</button>
            </div>

二、多个组件过度

2.1 参照1.1代码，动画效果可以显示

        <style>
            .v-enter,.v-leave-to{
                opacity: 0;
            }
            .v-enter-active, .v-leave-active{
                transition: opacity 1s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="root">
                <transition mode="in-out">
                    <Derrick v-if="show"></Derrick>
                    <Jessica v-else></Jessica>
                </transition>
                <button @click="handleClick">click</button>
            </div>
        </div>
    </body>
    <script>
        Vue.component('Derrick',{
            template:'<div>derrick</div>'
        })
        Vue.component('Jessica',{
            template:'<div>Jessica</div>'
        })

        var vm = new Vue({
            el:'#root',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                }
            }
        })
    </script>

2.2 动态组件实现

component表明为动态组件，定义typeb变量为derrick，默认显示derrick这个组件，再click事件中再通过type的值来显示不同组件

    <body>
        <div id="app">
            <div id="root">
                <transition mode="in-out">
                    <component :is="type"></component>
                </transition>
                <button @click="handleClick">click</button>
            </div>
        </div>
    </body>
    <script>
        Vue.component('Derrick',{
            template:'<div>derrick</div>'
        })
        Vue.component('Jessica',{
            template:'<div>Jessica</div>'
        })

        var vm = new Vue({
            el:'#root',
            data:{
                type:'Derrick'
            },
            methods:{
                handleClick:function(){
                    this.type = this.type === 'Derrick'? 'Jessica' : 'Derrick'
                }
            }
        })
    </script>

三、列表过度

3.1 列表循环数组的内容

每点击一次按钮，添加一次Hello Jessica，由于我们这里的id就是唯一的，可以使用id来作为key值

    <body>
        <div id="app">
            <div id="root">
                <div v-for="(item) of list" :key="item.id">
                    {{item.title}}
                </div>
                <button @click="handleClick">Add Item</button>
            </div>
        </div>
    </body>
    <script>
        var count = 0;

        var vm = new Vue({
            el:'#root',
            data:{
                list:[]
            },
            methods:{
                handleClick:function(){
                    this.list.push({
                        id:count++,
                        title:'hello jessica'
                    })
                }
            }
        })
    </script>

3.1 transition-group实现列表过度效果

        <style>
            .v-enter,.v-leave-to{
                opacity: 0;
            }
            .v-enter-active, .v-leave-active{
                transition: opacity 1s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="root">
                <transition-group>
                <div v-for="(item) of list" :key="item.id">
                    {{item.title}}
                </div>
                </transition-group>
                <button @click="handleClick">Add Item</button>
            </div>
        </div>
    </body>
    <script>
        var count = 0;

        var vm = new Vue({
            el:'#root',
            data:{
                list:[]
            },
            methods:{
                handleClick:function(){
                    this.list.push({
                        id:count++,
                        title:'hello jessica'
                    })
                }
            }
        })
    </script>

3.3 讲解

简单理解，div列表经过循环过后，就会变成几个div，每个div外层添加一个transition标签，列表过度就变成了每个div的过度，然后自动给每个div添加v-enter等class

<transition-group>
<div v-for="(item) of list" :key="item.id">
    {{item.title}}
</div>
</transition-group>

      <!--转换成-->

<transition>
    <div>hello jessica</div>
</transition>
<transition>
    <div>hello jessica</div>
</transition>
<transition>
    <div>hello jessica</div>
</transition>

四、动画封装

4.1 封装transition与判断条件

        //动画封装
        Vue.component('fade',{
            //slot插槽接收传递过来的DOM，show代表是否显示
            props:['show'],
            template:`
                <transition>
                    <slot v-if="show"></slot>
                </transition> `
        })

4.2 运用

            <div id="root">
                    <!--运用组件，show等于父组件show的变量-->
                    <fade :show=show>
                        <div>hello derrick</div>
                    </fade>
                    <fade :show=show>
                            <div>hello jessica</div>
                    </fade>
                    <button @click="handleClick">click</button>
            </div>

4.3 切换效果一同封装，使用js实现效果，比较推荐

    <body>
        <div id="app">
            <div id="root">
                    <!--运用组件，show等于父组件show的变量-->
                    <fade :show=show>
                        <div>hello derrick</div>
                    </fade>
                    <fade :show=show>
                            <div>hello jessica</div>
                    </fade>
                    <button @click="handleClick">click</button>
            </div>
        </div>
    </body>
    <script>
        //动画封装
        Vue.component('fade',{
            //slot接收传递过来的DOM，show代表是否显示
            props:['show'],
            template:`
                <transition 
                @before-enter="handleBeforeEnter"
                @enter="handleEnter">
                    <slot v-if="show"></slot>
                </transition> `,
                methods:{
                    handleBeforeEnter:function(el){
                        el.style.color ='red'
                    },
                    handleEnter:function(el,done){
                        setTimeout(()=>{
                            el.style.color = 'green'
                            done()
                            //动画执行完毕手动调用done
                        },2000)
                    }
                }
        })
        var vm = new Vue({
            el:'#root',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                }
            }
        })
    </script>

Licheng Xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习：元素、组件、列表过度与动画封装

Vue学习：元素、组件、列表过度与动画封装一、多个元素过度1.1 点击切换，此时点击style中的动画并没有出现由于Vue是尽可能的复用DOM元素，所以这时候动画并不会出现 <style> .v-enter,.v-leave-to{ opacity: 0; } ...
复制链接

扫一扫

专栏目录