25.多组件和transition-group列表元素的过渡

最新推荐文章于 2023-05-11 09:34:10 发布

休息休息夏

最新推荐文章于 2023-05-11 09:34:10 发布

阅读量102

点赞数 1

分类专栏： VUE基础学习文章标签： vue css vue.js html javascript

本文链接：https://blog.csdn.net/qq_42881159/article/details/117305329

版权

VUE基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue.js中实现多组件过渡和列表元素过渡。通过示例代码展示了使用`transition`和`transition-group`指令创建平滑的过渡效果，包括组件的切换过渡和列表元素的出入场动画。文章涵盖了过渡模式设置、CSS样式定义以及事件监听等关键点，帮助开发者理解Vue.js中的动态过渡机制。

摘要由CSDN通过智能技术生成

1.多组件过渡

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .v-enter-active,.v-leave-active{
            transition: all 1s;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
        }
        .v-enter-to,.v-leave{
            opacity: 1;
        }
    </style>
</head>
<body>
<div id="app">
    <button type="button" @click="view='news'">新闻</button>
    <button type="button" @click="view='info'">信息</button>
    <transition mode="out-in">
        <component :is="view"></component>
    </transition>

</div>
</body>
<script>
    let news = {
        template:'<div><h3>这里是新闻页面</h3></div>'
    }
    let info = {
        template: '<div><h3>信息发布</h3></div>'
    }
    let vm = new Vue({
        el: "#app",
        data: {
            view:'news',
        },
        methods: {},
        components:{
            news,
            info,
        }
    });
</script>
</html>

2.列表元素的过渡

在这里插入图片描述

transition-group是专门针对列表渲染的过渡系哦啊过使用的，和transition使用上一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .v-enter-active,.v-leave-active{
            transition: all 1s;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateY(20px);
        }
        b{
            display: inline-block;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <button type="button" @click="add">添加数字</button>
    <button type="button" @click="remove">删除数字</button>
    <div>
        <!--transition-group是专门针对列表渲染的过渡系哦啊过使用的，和transition使用上一致-->
        <transition-group>
            <b v-for="num in arr" :key="num">{{num}}&nbsp;</b>
        </transition-group>

    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            arr:[1,2,3,4,5,6,7],
            nextNum:8
        },
        methods: {
            add(){
                this.arr.push(this.nextNum++);
            },
            remove(){
                let index = Math.floor(this.arr.length/2);
                this.arr.splice(index,1);

            }
        },
    });
</script>
</html>

休息休息夏

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
25.多组件和transition-group列表元素的过渡

文章目录1.多组件过渡2.列表元素的过渡1.多组件过渡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> .v-enter-active,.v-leave
复制链接

扫一扫

专栏目录