我在 Vue 中有一个项目,我需要在其中显示图像。这些图像包含在 a. 加载页面时,我希望图像一次淡入一个。我添加了一个具有淡入效果的过渡组,并添加了一个功能,其中每个图像都会以一个小的延迟添加。
我似乎没有让图像显示在彼此之后。图像一下子全部显示出来。
我试图将我的代码放入下面的剪辑器中。但我似乎没有让 href 源受到限制。在我的项目中,我使用存储在assets/img
文件夹中的本地图像。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<transition-group name="fade">
<div v-for="logo in logos" :key="logo.id">
<img :src="logo.filename" alt="">
</div>
</transition-group>
<script>
new Vue({
el: '',
data() {
return {
logos: []
}
},
mounted() {
const addedLogos = [{
id: 1,
filename: 'http://files.gamebanana.com/img/ico/sprays/4f68c8d10306a.png'
},
{
id: 2,
filename: 'http://files.gamebanana.com/img/ico/sprays/4f68c8d10306a.png'
},
{
id: 3,
filename: 'http://files.gamebanana.com/img/ico/sprays/4f68c8d10306a.png'
},
{
id: 4,
filename: 'http://files.gamebanana.com/img/ico/sprays/4f68c8d10306a.png'
},
{
id: 5,
filename: 'http://files.gamebanana.com/img/ico/sprays/4f68c8d10306a.png'
},
{
id: 6,
filename: 'http://files.gamebanana.com/img/ico/sprays/4f68c8d10306a.png'
},
]
addedLogos.forEach(logo => {
setTimeout(() => {
const newLogos = this.logos
newLogos.push(logo)
this.logos = newLogos
}, 100)
})
}
});
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
</body>
</html>