vue 瀑布流 图片加载动画？

  • Z时代
  • 2024-02-24
  • 分类：IT

vue里这个图片加载动画怎么做的
vue 瀑布流 图片加载动画？

回答：

首先你要实现一个瀑布流的效果，然后再考虑怎么实现图片的出现效果。

瀑布流的效果，网上有太多的代码，copy 一下就好了。

动画出现的话，从图中看，应该就是改变 opacity 透明度的一个过渡效果。然后利用 transition-delay 过渡效果的延迟来实现。

而 transition-delay 的值就应该是一个随机值，比如 随机数*100ms 这样，通过 vue 里获得随机数后，把值给 transition-delay，再写入到 style 属性中就可以了。

回答：

简单思路就是骨架屏 + 一个预置的透明度。然后主要就是监听一下图片的onload事件之后移除透明度样式就好了。

在线Demo

但一般这样的都会有一个 Color Placeholder (色彩预置) 去设置渐变的背景色。
这里是完整的一篇相关文章 ? 实现类似Pinterest 的图片预加载功能

Edit

如果有网络问题无法加载在线Demo的：

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <div class="demo">
      <img class="loading" src="https://assets.codepen.io/2540759/internal/avatars/users/default.jpg?format=auto&version=1562062266&width=200&height=200" @load='onImageLoad'>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    onImageLoad(e) {
      // 模拟延迟
      setTimeout(() => {
        e.target.className = e.target.className.replace('loading', 'complete')
        // e.target.className  = 'complete'
      }, 1500)
    }
  }
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
  .demo {
    width: 200px;
    height: 200px;
    background: linear-gradient(to bottom, #4e5c6a, #232830);
    border-radius: 6px;
    margin: 12px;
    overflow: hidden;
    img {
      transition: opacity 2s;
    }
  }
  .loading {
    opacity: 0 
  }
  .complete {
    opacity: 1
  }
</style>

以上是 vue 瀑布流 图片加载动画？ 的全部内容， 来源链接： utcz.com/p/935074.html

回到顶部