时间戳

首页 > 解决方案 > Vue在加载时一次一个地淡入图像列表

javascript - Vue在加载时一次一个地淡入图像列表

问题描述

我在 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>

标签： javascriptvue.jsvuejs2settimeoutvue-transitions

解决方案

所有的setTimeout呼叫都会立即发生。它们不会延迟循环并导致下一次迭代等待，因此每个图像都计划同时显示。

您可以使用forEach循环索引来逐步安排它们：

addedLogos.forEach((logo, index) => {
  setTimeout(() => {
    const newLogos = this.logos
    newLogos.push(logo)
    this.logos = newLogos
  }, 100 * (index + 1))
})

这是一个演示：

new Vue({
  el: "#app",
  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, index) => {
      setTimeout(() => {
        const newLogos = this.logos
        newLogos.push(logo)
        this.logos = newLogos
      }, 100 * (index + 1))
    })
    
  }
})
div div, div div img {
  display: inline-block;
  width: 50px;
  height: 50px;
}
<div id="app">
  <transition-group name="fade">
    <div v-for="logo in logos" :key="logo.id">
      <img :src="logo.filename" alt="">
    </div>
  </transition-group>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

推荐阅读