如何仅在页面加载时禁用转换组？答案

【问题标题】：How to disable transition-group only on page load?如何仅在页面加载时禁用转换组？
【发布时间】：2019-10-09 16:47:52
【问题描述】：

我有一个呈现 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;
}

【问题讨论】：

标签： vue.js vue-transitions

【解决方案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'})
    }
}

【讨论】：

嗯，这似乎不起作用。我仍然看到页面加载时的转换触发。
你用的是最新的vue版本吗？
是的，这是一个全新的项目，使用的是 v2.6.10

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

我最终通过在数据中添加一个“transitionsOn”标志来实现这一点（似乎与它的初始化无关），以及一个计算出来的转换名称，即

<transition-group :name="transitionName">

在计算中，然后我有一个名为“flash”的过渡

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

然后，当我希望它触发时，我会设置 this.transitionsOn = true。

花了很多时间才弄明白，但它似乎工作正常

【讨论】：