1

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

3 回答 3

0

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

于 2019-10-10T14:38:10.443 回答
0

您需要绑定过渡组的持续时间

模板：

<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'})
    }
}
于 2019-10-09T21:35:27.160 回答
0

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

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

<transition-group :name="transitionName">

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

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

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

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

于 2020-12-28T15:07:38.703 回答