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
    :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。本质上，我向主体添加了一个类，并删除了所有过渡。然后在组件的created生命周期中，删除该类。这样可以消除页面加载时的过渡，但是仍然可以像我想要的那样单击按钮时保持过渡。

Answer 3

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

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

<transition-group :name="transitionName">

在计算中，我有一个叫做“flash”的过渡

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

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

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

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

3 个答案: