如何仅在页面加载时禁用过渡组？

Question

我有一个呈现 div 的过渡组，其中有一个具有 v-for 属性的组件，可以呈现多个项目。然后我有一个按钮，可以将一个新项目添加到数组的开头。这种过渡非常有效。

我唯一不喜欢的是，整个列表随着页面加载时的过渡而加载，我只想在页面加载时禁用它。我搜索了 Stack 和 Google 但找不到方法。有没有办法做到这一点，以便在单击按钮时过渡仍然有效，但在页面加载时被禁用？

<transition-group
    name="item-list"
    tag="div">
    <item-row
        v-for="item in items"
        :key="item.id"
        :item="item" />
</transition-group>



.item-list-enter-active,
.item-list-leave-active,
.item-list-move {
    transition         : 250ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
    transition-property: opacity, transform;
}

.item-list-enter {
    opacity  : 0;
    transform: translateX(50px) scaleY(0.5);
}

.item-list-enter-to {
    opacity  : 1;
    transform: translateX(0) scaleY(1);
}

.item-list-leave-active {
    position: absolute;
}

.item-list-leave-to {
    opacity         : 0;
    transform       : scaleY(0);
    transform-origin: center top;
}

Answer 1

您需要为transition-group

绑定时长

模板：

<transition-group
    :duration="duration"
    name="item-list"
    tag="div">
    <item-row
        v-for="item in items"
        :key="item.id"
        :item="item" />
</transition-group>

脚本：

data() {
    return {
        duration: 0,
        items: [
            {id: 1},
            {id: 2}
        ]
    }
},
methods: {
    add() {
        if(this.duration===0) this.duration = 250
        this.items.push({id: 'xxx'})
    }
}

Answer 2

我希望我能找到一种更 "Vue-y" 的方法来处理这个问题，但我最终选择了 this route。本质上，我在正文中添加了一个 class 并删除了所有过渡。然后在组件的 created 生命周期中，我删除了 class。这会删除页面加载时的过渡，但仍会像我想要的那样在单击按钮时保持过渡。

Answer 3

以防有人像我一样遇到这种情况。

我最终通过在数据中添加一个 'transitionsOn' 标志（似乎并不重要它被初始化为什么）和一个计算的转换名称来实现这一点，即

<transition-group :name="transitionName">

在计算中，我有一个名为 'flash'

的转换

    computed: {
        transitionName() {
           return this.transitionsOn ? 'flash' : 'disabled';
        },
    },

然后我会在我想让它触发时设置 this.transitionsOn = true。

花了很多时间来解决这个问题，但它似乎工作正常

如何仅在页面加载时禁用过渡组？

How to disable transition-group only on page load?

vue.js

vue-transitions