代码优化者

这个屌丝很懒，什么也没留下！

热门标签

第三十二篇 transition 过渡动画_ can only be used on a single element.

作者：代码优化者 | 2024-01-29 14:25:58

踩

can only be used on a single element. use fo

在完成之前的抽屉效果时候是没有完成一个过渡的动画效果，通过其他技术手段应用动画也是可以的，比如动态的切换 class 和 style，通过动态的添加和删除对应的状态是能够驱动动画的,那么本篇内容讲到的是vue当中提供的内置组件 transition 可以帮助你基于状态改变的过渡和动画。在了解 transition 的使用之前呢，先对我们先前如何来做动画做一个简单的回顾：


<style>
    .box{
        width: 100px;
        height: 100px;
        background-color:rebeccapurple;
    }
 
    /* 移入 */
    .box-enter-active{
        animation: move 1s;
    }
 
    /* 移出 */
    .box-leave-active{
        animation: move 1s reverse;
    }
 
    @keyframes move{
        0%{
            transform: translateX(100px);
        }
        100%{
            transform: translateX(0px);
        }
    }
</style>
<body>
<div id="app">
    <div class="box box-enter-active"></div>
    <hr>
    <div class="box box-leave-active"></div>
</div>
...

transition 使用 (单元素过渡)

上面进行了一个简单的动画，下面通过使用transition进行结合：完成一个动画移入和移出的效果；上面编写的 css 当中注意到 css class（.box-enter-active/.box-leave-active），这个就是接下来与 transition 有关了，".xx-enter-active"就是进入动画的生效状态，".xx-leave-active"就是离开动画的生效状态；xx就是要告诉transition来进行动画的；下面来测试一下：


<style>
    .box{
        width: 100px;
        height: 100px;
        background-color:rebeccapurple;
    }
 
    /* 移入 */
    .box-enter-active{
        animation: move 1s;
    }
 
    /* 移出 */
    .box-leave-active{
        animation: move 1s reverse;
    }
 
    @keyframes move{
        0%{
            opacity: 0;
            transform: translateX(100px);
        }
        100%{
            opacity: 1;
            transform: translateX(0px);
        }
    }
</style>
</head>
<body>
 
<div id="app">
    <transition name="box">
        <p v-show="isShow">欢迎光临</p>
    </transition>
    <button @click="handleClick">点击</button>
</div>
 
<script>
    new Vue({
        el:'#app',
        data:{
            isShow:false
        },
        methods:{
            handleClick(){
                this.isShow = !this.isShow
            }
        }
    })
</script>

这时候会发现什么呢？之前的动画效果一进场或者刷新后它就会开始，使用transition时候就需要迪点击触发；一开始就要进行应用那么可以在< transition name="box" > 中添加 appear，即 < transition name="box" appear > 也就完成初始效果的过渡；

通过下面这个图可以更加清楚的了解 Vue 当中提供的transition内置组件如何进行一个过渡过程；

多元素使用

以上transition仅仅是单个元素的过渡，如果多个元素呢？


<transition name="box">
    <p v-show="isShow">欢迎光临</p>
    <p v-show="isShow">欢迎光临</p>
</transition>

控制台发出警告了：


[Vue warn]: <transition> can only be used on a single element. Use <transition-group> for lists.
 
(found in <Root>)

这是因为我们使用了多个元素，<transition> 只能用于单个元素。<transition-group> 用于列表；


<p v-show="isShow">欢迎光临</p>
<p v-show="isShow">欢迎光临</p>

两个并列的元素，那么如果我一定要同时出现，又要使用transition呢？将他们包裹起来呢？


<div v-show="isShow">
    <p>欢迎光临</p>
    <p>欢迎光临</p>
</div>

显然可以而且没有警告提示；那么多个元素是什么，就是"有我没你"的状态，下面试一下：


<transition name="box" appear>
    <p v-if="isShow">欢迎光临</p>
    <p v-else>感谢光临</p>
</transition>

当 isShow 是 false，v-else 会被创建，v-if 进行动画离开，那v-else是否会动画进场，两者会不会相遇？会是什么效果？除了初始效果，动画效果居然没有了；

那么换标签，换成与 p 标签不一样的其他标签呢？


<transition name="box" appear>
    <p v-if="isShow">欢迎光临</p>
    <div v-else>感谢光临</div>
</transition>

居然能够达到刚刚想要完成的效果？那么为什么刚刚使用p标签反而又不行了呢？还记得在第六篇 v-for中的key值设置中讲到 Vue diff算法中进行虚拟DOM和真实的比对；下面通过一张图来进一步了解：

新旧状态同时为p标签的内容不相同，比对之后为了提示性能将保留标签将内容替换，并没有删除创建，而用div标签之后比对标签不同，会按照同层级对比，p标签和div标签不同，删除p标签然后创建div标签这时就有了这个动画效果，一个要走，另一个要来的效果；

多元素过渡 - 设置key

当有相同标签名的元素切换，可以利用key的特性设置唯一的值来标记以让Vue区别它们，否则会因为效率性能从而替换标签当中的内容；


<transition name="box" mode="in-out">
    <p v-if="isShow" key="weCome" >欢迎光临</p>
    <p v-else key="toOut" >感谢光临</p>
</transition>

为了更好的过渡效果，可以在 <transition> 中添加mode；有以下两个值：

1） in-out <transition mode="in-out">

2) out-in <transition mode="out-in">

以上就是单元素过渡和多元素的过渡讲解，那么如何在多个组件当中如何实现过渡？

多组件过渡

那么在之前就讲过这个组件以及利用组件做过一些案例，其中就有这样的一个案例，（篇目地址：），在这个案例当中我们也通过多种方式实现组件的动态切换，其中就有动态组件当中的这个案例：

（如果不知道或者不清楚的可以点击上面篇目地址进行回顾）

通过之前的讲到的 Vue 所提供的动画解决方案 transition 来实现组件之前的动态过渡效果；下面先进行对先前的案例进行一个讲解，附上代码：


<div id="app">
    <header>
        <ul>
            <li v-for="item in nav" :key="item.id" @click="handChange(item)" :class="isChoose == item.id?'active':''">{{item.title}}</li>
        </ul>
    </header>
 
    <keep-alive>
        <component :is="isChoose"></component>
    </keep-alive>
...

在讲transition的时候讲过将需要进行动画效果的内容进行<transition>包裹起来，而<keep-alive>是缓存组件，应该将谁包裹起来呢？谁变化就包谁，<keep-alive>组件并不发生变化，而是通过<component>进行不同组件的动态切换，所以应该这样来写：


<keep-alive>
    <transition>
        <component :is="isChoose"></component>
    <transition>
</keep-alive>

css class


.content-enter-active{
    animation: move 1.5s;
}
.content-leave-active{
    animation: move 1.5s reverse;
}
@keyframes move{
    0%{
        opacity: 1;
        transform: translateX(100px);
    }
    100%{
        opacity: 0;
        transform: translateX(0px);
    }
}

页面：


<keep-alive>
    <transition name="content">
        <component :is="isChoose"></component>
    </transition>
</keep-alive>

这样就能够实现组件的过渡动画效果！

本篇的内容就到此，通过 tansition 实现单个元素和多个元素的动画过渡以及组件在组件当中的过渡效果，以上就是用Vue提供的动画解决方法部分之一，在此感谢大家支持！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/43222