目标:
我有一个项目列表,当其中一个项目发生变化时,我想通过使它具有淡出到透明的黄色背景来引起用户的注意。
我是如何尝试这样做的:
我的 Vue 实例有一个 items
列表。
每个项目都有一个属性,isChanged
,它是一个 bool 值,指示该项目是否已被界面中的某个操作更改。
我已将一个类绑定(bind)到项目,以便当它们的 isChanged
属性为真时,将添加类 highlight
。
<ul v-for='item in items' :key='item.id'>
<li :class="{ 'highlight' : item.isChanged>{{ item.name }}</li>
</ul>
高亮类只是将背景更改为黄色,然后将其淡化为透明:
.highlight {
animation: yellowfadingbox 4s;
}
@keyframes yellowfadingbox {
from {
background: @yellow;
}
to {
background: transparent;
}
}
因此,作为示例,我有一个方法 updateItem
进行 ajax 调用,完成后,将项目的 isChanged
属性设置为 true。
updateItem: function (itemKey) {
axios.get('/item/update', {
params: {
id: id,
}
}).then(response => {
this.item[itemKey].isChanged = true;
});
}
这是因为它向项目添加了适当的 highlight
类,给我想要的效果。但是,继续前进,highlight
类始终存在,因此我无法重新创建效果。
我该如何解决这个问题/是否有更聪明的方法?
最佳答案
这是您可以采用的一种方法。
我使用的是过渡而不是动画。添加 highlight
类将背景设置为黄色。然后我再次将其删除以使过渡恢复透明。
我正在使用 requestAnimationFrame
进行延迟,以便过渡有机会生效。延迟解决了两个问题。首先,我们需要给 Vue 渲染的机会。其次,我们需要让浏览器有机会应用黄色背景(样式重新计算),否则不会发生过渡。有多种方法可以实现这两件事。 $nextTick
可以用来解决第一个问题,但我们仍然需要一些方法来启动浏览器以应用样式。这变得很繁琐,因为您需要获取对相关元素的引用,然后使用 getComputedStyle
强制对 background-color
进行样式重新计算。相比之下,requestAnimationFrame
似乎是一种相对轻松的解决方案。
在此示例中,只需单击项目即可查看效果。
new Vue({
el: '#app',
data: {
items: [{
name: 'Red',
id: 1,
isChanged: false
},
{
name: 'Green',
id: 2,
isChanged: false
},
{
name: 'Blue',
id: 3,
isChanged: false
},
{
name: 'Yellow',
id: 4,
isChanged: false
}
]
},
methods: {
onClick (item) {
item.isChanged = true;
requestAnimationFrame(() => {
item.isChanged = false;
});
}
}
});
.list-item {
transition: background-color 4s;
}
.list-item.highlight {
background-color: yellow;
transition: none;
}
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
<ul>
<li
v-for="item in items"
:key="item.id"
:class="{ 'highlight' : item.isChanged}"
class="list-item"
@click="onClick(item)"
>
{{ item.name }}
</li>
</ul>
</div>
关于javascript - Vue.js 重复添加同一个类创建 "just updated"效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56590280/