gpt4 book ai didi

vue.js - 循环中元素的VueJS转换?

转载 作者:行者123 更新时间:2023-12-02 00:48:55 25 4
gpt4 key购买 nike

这是我的代码:我想在每次数据更新时在 HelloWorld 组件上创建一个转换。过渡本身工作正常

  <transition name="fade">
<p v-if="awesome">Vue is awesome</p>
</transition>

这是我动态创建的“卡片”。
  <v-row no-gutters>
<v-col cols="12" sm="4" md="4" v-for="(todo, index) in todos" v-bind:key="index">
<v-card class="pa-2" outlined tile>
<transition name="fade">
<HelloWorld
v-bind:todos="todos"
v-bind:index="index"
v-bind:class="(todos[index].done)?'green':'red'"
/>
</transition>
</v-card>
</v-col>
</v-row>

此处过渡不起作用。

CSS在这里:
<style scoped>
.top {
background: blue;
color: white;
display: flex;
justify-content: space-around;
border-bottom: 2.5px solid black;
}

.fade-enter {
opacity: 0;
}

.fade-enter-active {
transition: opacity 1s;
}

.fade-leave {
}

.fade-leave-active {
transition: 1s;
opacity: 0;
}
</style>

为什么以及如何让它工作?

最佳答案

如果要在循环中为 each 元素设置动画,则必须:

  • transition 放在循环中。
  • 而且,使用 <transition-group> ,而不仅仅是 <transition>
  • <v-row no-gutters>
    <transition-group name="fade" mode="out-in">
    <v-col cols="12" sm="4" md="4" v-for="(todo, index) in todos" v-bind:key="index">
    <v-card class="pa-2" outlined tile>
    <HelloWorld
    v-bind:todos="todos"
    v-bind:index="index"
    v-bind:class="(todos[index].done)?'green':'red'"
    />
    </v-card>
    </v-col>
    </transition-group>
    </v-row>
    而且我还建议您不要使用 1s 长动画,它太长了。做这样的事情:
    CSS
    .fade-in-enter-active {
    transition: all 0.5s ease;
    }

    .fade-in-leave-active {
    transition: all 0.5s ease;
    }

    .fade-in-enter, .fade-in-leave-to {
    position: absolute; /* add for smooth transition between elements */
    opacity: 0;
    }
    如果动画是抽搐的,您可以在 position: absolute;enter CSS 规则中添加 leave-to (或仅用于 leave-active )。
    在 vue 文档中查看此页面: https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions

    关于vue.js - 循环中元素的VueJS转换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59236565/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com