我有一个transition-group来渲染一个div,其中有一个带有v-for属性的组件来渲染几个元素,然后我有一个按钮来添加一个新的元素到数组的开头,这个transition工作得很完美。
我唯一不喜欢的是,在页面加载时整个列表都加载了转换,我想只在页面加载时禁用它。我搜索了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条答案
按热度按时间a6b3iqyw1#
我希望我能找到一种更“Vue-y”的方式来处理这个问题,但是我最终选择了this route。本质上,我在主体中添加了一个类,并删除了所有的转换。然后在组件的
created
生命周期中,我删除了那个类。这样就删除了页面加载时的转换,但仍然保留了点击按钮时的转换。daolsyd02#
你可以动态地改变转换组的
name
值。也许在页面加载的时候有一个不同于CSS目标的正确类名的值。然后在mounted
生命周期钩子中你可以把它改回正确的类名。ddrv8njm3#
您需要绑定***transition-group***的持续时间
模板:
脚本:
qoefvg9y4#
以防有人像我一样碰到这个。
最后,我通过在数据中添加一个
transitionsOn
标志(它被初始化为什么似乎并不重要)和一个计算出的转换名称(即,在computed中,对于名为
'flash'
的转换,我有然后,当我想让它发射时,我会设置
this.transitionsOn = true
。花了很多时间才弄清楚这一点,但它似乎工作正常