问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

transition-group 包裹的过渡组件，增加数据时，元素没有进入动画？

头像
小豆
    43
    新手上路，请多包涵

    transition-group 包裹的过渡组件，当删除一个元素，同时在这个删除位置上写入多个元素的时候：

                    // 提取当前所有图标，进行释放
                let onk = this.$util.deepClone(this.navLista)
                // 先提取，后释放
                let dnum = this.findIdIcon(this.rightClickValue.id)
                let delFolder = onk[this.aindex].children.splice(dnum,1)[0]
                for(let i = delFolder.children.length-1;i >= 0; i--){
                    onk[this.aindex].children.splice(dnum,0,delFolder.children[i])
                }

                this.$store.commit('navListModiy', onk)

    元素没有进入动画，直接就是enter-to的末位css

    .flip-li-enter-active {
    transition-duration: .3s;
}

.flip-li-leave-active {
    position: absolute;
}

.flip-li-move {
    transition-duration: 0.28s;
}

.flip-li-enter-to {
    opacity: 1;
    transform-origin: center;
    transform: scale(1);
    // transition-duration: .3s;
}

// 单个删除
.flip-li-enter,
.flip-li-leave-to {
    opacity: 0;
    transform-origin: center;
    transform: scale(.1);
    transition-duration: .3s;
}

    就是图标加入的时候没有从flip-li-enter这个css过渡到.flip-li-enter-to，所以没有动画，同时.flip-li-enter-to这个类名也没有消失，一直在dom上，vue2环境求解啦，谢谢啦

    在看文档，appear 这种属性设置也没有用，不知到是加入的时候是不是存在了什么问题

    前端vue2
    阅读 966
    avatarAI BotBETA

    从你的描述和代码中，我看到你在使用 Vue 的 <transition-group> 组件来处理元素的过渡动画。但是，你遇到的问题是，当你在删除一个元素并在其位置上添加多个新元素时，新元素没有从 .flip-li-enter 类过渡到 .flip-li-enter-to 类，因此没有动画效果。同时，.flip-li-enter-to 这个类名并没有从 DOM 上消失。

    问题可能出在 transition-group 的 name 属性上。这个属性是用来指定过渡的类名的前缀的。如果没有设置 name 属性，那么 Vue 会使用组件的标签名作为前缀。然而，在你的例子中，你似乎没有设置 name 属性，所以 Vue 可能会使用默认的前缀，这可能与你预期的类名前缀不匹配。

    你可以尝试在你的 <transition-group> 标签中添加 name 属性，并将其设置为 "flip"，这样你的过渡类名就会有一个明确的前缀，例如：

    <transition-group name="flip">
  <div v-for="item in list" :key="item.id">
    <!-- Your content here -->
  </div>
</transition-group>

    然后，在你的 CSS 中，你可以使用这个前缀来定义你的过渡类，例如：

    .flip-enter-active {
  transition: opacity .3s, transform .3s;
}

.flip-leave-active {
  position: absolute;
}

.flip-move {
  transition: transform .28s;
}

.flip-enter-to {
  opacity: 1;
  transform: scale(1);
}

    另外，你需要确保你的 v-for 指令中的 :key 是唯一的。这是 Vue 的一个最佳实践，可以帮助提高渲染的性能，并确保正确的过渡效果。在你的例子中，你可以使用每个项目的 id 作为 key。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题