当前位置：首页 > VUE

vue动画库实现相册

2026-01-22 20:50:54VUE

vue-transition-group 实现基础相册动画

使用 Vue 的 <transition-group> 组件配合 CSS 过渡类名实现图片排列动画

<template>
  <transition-group name="fade" tag="div" class="gallery">
    <div v-for="(img, index) in images" :key="img.id" class="gallery-item">
      <img :src="img.url" @click="remove(index)">
    </div>
  </transition-group>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: all 0.5s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: scale(0.9);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}
</style>

animate.css 集成方案

通过 CDN 引入 animate.css 实现预设动画效果

import 'animate.css'

<transition-group
  enter-active-class="animate__animated animate__fadeInUp"
  leave-active-class="animate__animated animate__fadeOutDown"
>
  <!-- 相册内容 -->
</transition-group>

GSAP 高级动画控制

使用 GSAP 库实现更复杂的轨迹动画和交互效果

import gsap from 'gsap'

methods: {
  beforeEnter(el) {
    gsap.set(el, {
      scale: 0.8,
      opacity: 0
    })
  },
  enter(el, done) {
    gsap.to(el, {
      scale: 1,
      opacity: 1,
      duration: 0.5,
      ease: "back.out(1.7)",
      onComplete: done
    })
  }
}

图片查看器过渡效果

实现模态框查看大图的过渡动画

.viewer-enter-active {
  transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}
.viewer-leave-active {
  transition: all 0.25s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}
.viewer-enter-from,
.viewer-leave-to {
  transform: scale(0.8);
  opacity: 0;
}

响应式布局动画

结合 CSS Grid 和媒体查询实现响应式相册

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-item {
    transition: transform 0.3s ease;
  }
  .gallery-item:hover {
    transform: scale(1.05);
  }
}

懒加载动画优化

使用 Intersection Observer 实现图片懒加载动画

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate__animated', 'animate__fadeIn')
      observer.unobserve(entry.target)
    }
  })
})

onMounted(() => {
  document.querySelectorAll('.lazy-img').forEach(img => {
    observer.observe(img)
  })
})

vue动画库实现相册