实现组件动画的时候报这个错误

最新推荐文章于 2024-08-09 14:52:14 发布

paul jeorgh

最新推荐文章于 2024-08-09 14:52:14 发布

阅读量520

点赞数 11

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2302_79777012/article/details/135768860

版权

文章讲述了在Vue3项目中使用`Transition`时遇到的非元素根节点动画问题，解决方案是在template中包裹所有节点，如使用`<div>`包含`el-card`组件实例，以确保正确渲染和动画效果。

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

vue3 Component inside ＜Transition＞ renders non-element root node that cannot be animated.

然后怎么解决的,在template元素里面放了多个节点所以报这个错误,我们先写一个div里面写就可以解决

<template>
 <div>
    <el-card>
        123
    </el-card>
    <el-card>456</el-card>
 </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
</style>

报错时候的代码

<template>

    <el-card>
        123
    </el-card>
    <el-card>456</el-card>

</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
</style>