VUE组件过渡切换 利用transition实现组件前进后退切换出现的问题

最新推荐文章于 2023-05-05 17:42:17 发布
最新推荐文章于 2023-05-05 17:42:17 发布
阅读量1.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ajax_a/article/details/102868920
版权

首先，作为一个大条性格的人，写动画太难受，在做这个效果的时候磨了好久，终于磨出来啦！
首先先要熟悉过度动画动画的整体流程
.v-enter{
初始进入过渡时的状态
}
.v-enter-to{
进入过渡后的状态
}
.v-leave{
初始离开过渡的状态
}
.v-leave-to {
离开过渡后的状态
}
.v-enter-active{
定义进入过渡的过程
}
.v-leave-active {
定义离开过渡的过程
}
上面的定义是没有疑问的

那么在切换组件时，过渡动画保持一种不变还好，如果是多种的话就不好调节啦
例如

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* table{
            border-collapse: collapse;
        } */
        body {
            background: #f0f0f0;
            width: 100vw;
            overflow: hidden;
        }

        footer {
            width: 100vw;
            position: fixed;
            bottom: 0;
            display: flex;
            justify-content: space-around;
            background: white;
            border: solid 1px #ededed;
            box-shadow: 0 0 10px #999;
            padding: 2vw 0;
        }

        footer .item {
            cursor: pointer;
        }

        footer .item img {
            display: block;
        }

        #index {
            height: 100vh;
            background: rgb(231, 147, 147);
        }

        #search {
            height: 100vh;
            background: rgb(111, 240, 229);
        }
 
        .index-enter{
            transform: translateX(-100%);
        }
        .index-leave-to {
            transform: translateX(-100%);
        }

        .index-enter-active,
        .index-leave-active {
            transition: all 1s;
        } 




        .search-enter{
            transform: translateX(100%);
        }
        .search-enter-to{
            transform: translateX(0);
        }
        .search-leave{
            transform: translateX(0);
        }
        .search-leave-to {
            transform: translateX(100%);
        }
        .search-enter-active,
        .search-leave-active {
            transition: all 1s;
        }


        .next{
            position: absolute;
            width: 100vw;
            left:0;
        }
    </style>
</head>

<body>
    <div id="app">
        <transition :name="name">
            <keep-alive>

                <component :is="type" class="next" :key="type">

                </component>

            </keep-alive>
        </transition>
        <footer>
            <tab v-for="tab,idx in fotbar" :key="idx" v-model="isActive" :tabs="tab.name" :list="tab.tag"
                @typechange="tChange" @nchange="achange">
                <img :src="isActive == tab.name ? tab.isActive_path : tab.url_path " alt="" slot="img">
                <span :style="isActive == tab.name ? styleObj : '' " slot="text">{{tab.name}}</span>
            </tab>
        </footer>
    </div>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/vue.js"></script>
    <script type="html/x-template" id="tabbar">
            <div class="item" @click="active">
                    <slot name="img"></slot>
                    <slot name="text"></slot>
            </div>
    </script>
    <script type="htm/x-template" id="index">
        <transition name="index">
    <div id="index">
        <h1>首页</h1>
    </div>
    </transition>
    </script>
    <script type="htm/x-template" id="search">
        <transition name="search">
    <div id="search">
        <h1>发现</h1>
    </div>
    </transition>
    </script>
    <script type="htm/x-template" id="check">
        <h1>订单</h1>
    </script>
    <script type="htm/x-template" id="mine">
        <h1>我的</h1>
    </script>
    <script>
        Vue.component('index', {
            template: '#index',
            data() {
                return {

                }
            }
        })
        Vue.component('search', {
            template: '#search',
            data() {
                return {

                }
            }
        })
        Vue.component('check', {
            template: '#check',
            data() {
                return {

                }
            }
        })
        Vue.component('mine', {
            template: '#mine',
            data() {
                return {

                }
            }
        })
        Vue.component('tab', {
            template: '#tabbar',
            data() {
                return {

                }
            },
            props: ['value', 'tabs', 'list'],
            methods: {
                active() {
                    this.$emit('input', this.tabs);
                    // console.log(this.list);
                    this.$emit('typechange', this.list)
                    this.$emit('nchange', this.list)
                }
            }

        })
        new Vue({
            el: '#app',
            data: {
                fotbar: [
                    { name: '首页', url_path: './img/icon/饿了么.png', isActive_path: './img/icon/饿了么(1).png', tag: 'index' },
                    { name: '发现', url_path: './img/icon/指南针.png', isActive_path: './img/icon/指南针(1).png', tag: 'search' },
                    { name: '订单', url_path: './img/icon/订单.png', isActive_path: './img/icon/订单(1).png', tag: 'check' },
                    { name: '我的', url_path: './img/icon/我的.png', isActive_path: './img/icon/我的(1).png', tag: 'mine' }
                ],
                isActive: '首页',
                styleObj: {
                    'color': 'blue'
                },
                type: 'index',
                name: 'index'

            },
            mounted() {

            },
            methods: {
                tChange(v) {
                    this.type = v;
                    // console.log(v)
                },
                achange(v) {
                    this.name = v;
                }
            }
        })
    </script>
</body>

</html>

在上面的代码块中，写了一个tabbar组件，后来想要添加一个切换的效果，所以就利用tabbar做了一个小实验。
效果描述;
当点击发现的时候，首页组件从右向左移动做出场动画，而发现组件从右向左做入场动画，当点击首页的时候，发现组件从左向右做出场动画，而首页组件从左向右做入场动画，
可以发现它们两个组件的动画是反着来的，它们的初始进入过渡状态和进入过渡后的状态，以及初始离开过渡的状态和离开过渡后的状态都是不一样的
后来就在他们的模板上分别加了transition设置不同的name名称，实现不同的动画名称；
后来又出现了一个页面执行完出场动画后，另一个页面直接显现并没有执行入场动画,后来加了一个class类名设置它的css样式

	.next{
            position: absolute;
            width: 100vw;
            /* left:0; */
        }
一个小人儿
关注
Vue Transition实现类原生组件跳转过渡动画的示例
12-10
总结来说，Vue Transition 是 Vue.js 中实现组件过渡动画的关键工具，通过结合 CSS 或 JavaScript，开发者可以创建出各种复杂的动态效果。在实际开发中，合理利用 Vue Transition 可以极大地提升用户体验，同时保持...
Vue.js实现微信过渡动画左右切换效果
10-19
在本文中，我们将探讨如何使用Vue.js框架来实现类似微信应用中的过渡动画效果，特别是实现左右切换的动画效果。为了达到这个效果，我们将重点介绍如何结合Vue.js和Vuex技术栈，并通过详细的示例代码，向大家展示这一...
vue2使用transition过渡效果时，样式发生错误，过渡结束后，样式正确显示
赢是渺然一线，输才是常态 的博客
04-02 1541
因为业务要求，我自己写了一个popup组件，在需要用户确认的地方调用显示，为了提升体验，所以想给popup增加淡入淡出的效果，于是用了animate.css和transition组件，但是在过渡过程中发生了样式错误，具体看下图： 过渡完成后，正确显示： 尝试 一开始，我认为可能是z-index的问题，但是即使我把z-index调到100000，还是没有正确显示，而且过渡结束之后，是能正确显示的...
vue组件间的切换和组件切换过渡动画
菜虚鲲的博客
04-16 2081
Vue组件间的切换和组件切换过渡动画 组件切换 使用component标签的：is="'组件名'"来控制组件的切换组件： <div id="app"> <button @click="changeComponent('component_one')">组件1</button> <button @click="changeCo...
vue使用transition切换页面过渡动画，并解决切换组件时产生的空白
weixin_43996368的博客
06-04 3932
vue使用transition切换页面过渡动画，并解决切换组件时产生的空白name属性mode属性class属性举例templatestyle name属性 如果使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 transition-enter。 mode属性 out-in 当前元素先进行过渡，完成后新元素过渡进入 in-out 新元素元素先进行过渡，完成后当前元素过渡离开 class属性 v-enter，v-enter-active，v-enter-to
Vue3 Transition 踩坑记
Immerse的 Blog
04-09 320
系列首发于公众号[『前端进阶圈』]，若不想错过更多精彩内容，请“星标”一下，敬请关注公众号最新消息。Transition组件子元素不能包含注释，这会导致无法通过运行时编译，导致组件不能正确渲染。(我踩了半小时的坑，不要跟我一样)模板编译中，Transition子元素不允许多个组件或元素，否则编译不通过，根据单测源码得知，如果需要多个分支，可以使用来确定具体分支。Transition子元素的组件中可以包含注释，但是不要包含太多，不然会影响渲染效率。希望大家能从我的经验中获得一些收获，避免重复踩坑。
Vue学习之路（七）---transition过渡动画
Young的博客
01-21 1058
vue中过度动画v-if和v-show都可以使用，首先要明白四个状态，v-enter(刚开始进入) ，v-enter-active(进入过程中到进入完毕),v-leave-enter(刚开始离开),v-leave-enter-active(离开过程中到离开)，示例图如下 好的，弄清楚了这四种状态，然后我们就可以简单的开始transition过渡的实操了,在v-enter-active以及v-
使用vue-router切换页面时实现设置过渡动画
10-16
总之，通过结合vue-router的路由配置、`<transition>`组件以及CSS过渡效果，我们可以轻松地为Vue应用中的页面切换添加过渡动画。这不仅提升了应用的视觉效果，还能提供更接近原生应用的用户体验。在开发过程中，不断...
vue页面切换项目实现转场动画的方法
10-16
本文将详细讲解如何在Vue项目中实现页面切换的转场动画，主要涉及Vue的过渡和动画机制，以及Vue Router的相关配置。 首先，转场动画的核心在于Vue的过渡系统，它允许我们在组件进入、离开时添加过渡效果。Vue提供了...
vue路由前进后退动画效果的实现代码
10-17
在本文中提到的<vue-route-transition>和都是Vue组件化的体现，它们分别用于处理路由过渡和页面布局。 6. 可重用性：在Vue.js中，开发的组件和功能具有高度的可重用性。例如，使用import RouteTransition from 'vue...
【猛地学】Vue的$nextTick、过渡与动画＜transition＞
fangyuan__的博客
07-30 292
Vue的$nextTick、过渡与动画
vue transition的理解
热门推荐
qq_41756580的博客
09-09 1万+
最近开发的过程中用到了vue的transition组件，写一下自己的心得体会。 transition的作用 首先我的理解是transition是作为元素切换时的过渡动画，例如在一个div进行v-if,v-show的时候，他的显示与隐藏分别进行怎样的变幻，都可以由transition进行控制。 transition的属性 v-enter：元素显示/插入前的效果，例如：transform:translateX(-200%); v-active-enter：元素显示/插入的过渡时间和函数，例如：tra.
vue2.0 transition 用法分析
StarFishing
12-01 3513
在开发仿饿了么app项目的过程中遇到了1.0与2.0版本transition用法不一致的情况，这里给出修改方法，以及用法的解释； vue2.0 过渡效果（transition） 在进入/离开的过渡中，会有 6 个 class 切换。 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡...
【Vue】 使用中的注意事项（过渡 & 动画）：16.进入/离开&列表过渡 17.状态过渡
qq_20535249的博客
11-21 458
进入/离开 & 列表过渡 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。 CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类...
Vue3 Transition组件给页面切换加动画效果
最新发布
前端咸鱼翻身的博客
05-05 1万+
使用Vue3自带的Transition组件给页面组件之间切换加过渡效果，主要应用在移动端设备，改善用户的交互体验。
vue模块化开发过程中（移动端），页面transition切换时出现X轴滚动条的问题
weixin_45846177的博客
11-06 3422
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
display和transition过渡冲突 元素移动显现消失的解决方案
Noctis99的博客
09-05 1305
v
解决 vue 开发过程中 卡顿的问题 ，退出严格模式
joshua2046的博客
08-09 1588
解决vue 开发过程中卡顿，退出严格模式
react，antd的Tabs，切换闪动问题，动画效果从前一个tag到新点击tag反复滑动
nuanzhu的博客
03-26 5982
公司项目，用的antd+umi，所以UI库直接用的antd的。 其中，有一个页面的Tabs出现以上问题，排查过组件使用、修改过动画效果，都无用。 最后发现和tab本身没关系，不是各种引入冲突。 是因为每个tab页有好几个接口请求，每个都会触发render刷新，而tab切换时，active值因为存在state里，因此数据变化也会触发render加载，因此会出现多次render加载，也导致...
Vue自制内部组件轮播切换效果实现
在Vue.js中，实现组件轮播切换可以为用户提供平滑的交互体验，特别是对于包含大量图片或其他资源的内部组件。通常，轮播组件会一次性渲染所有内容，但这可能导致性能问题，尤其是当组件数量较大时。因此，我们将构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值