vue实现各种特效

Vue.js 结合 CSS3 和 JavaScript 可以实现丰富的交互特效。以下是几种常见特效的实现方法：

过渡动画（Transition）

通过 Vue 内置的 <transition> 组件实现元素进入/离开的动画效果：

<transition name="fade">
  <p v-if="show">渐变显示的内容</p>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

列表动画（TransitionGroup）

为列表项添加排序动画效果：

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

鼠标跟随特效

结合鼠标事件实现元素跟随效果：

<div 
  class="follower"
  :style="{ left: x + 'px', top: y + 'px' }"
></div>

data() {
  return {
    x: 0,
    y: 0
  }
},
mounted() {
  window.addEventListener('mousemove', this.updatePosition);
},
methods: {
  updatePosition(e) {
    this.x = e.clientX;
    this.y = e.clientY;
  }
}

粒子动画

使用 Canvas 或第三方库（如 particles.js）创建粒子效果：

import Particles from 'particles.js'
export default {
  mounted() {
    Particles.init({
      selector: '.particles',
      color: '#FFFFFF',
      connectParticles: true
    });
  }
}

3D 卡片翻转

利用 CSS transform 实现 3D 翻转效果：

<div class="card" @click="flipped = !flipped">
  <div class="card-inner" :class="{ 'is-flipped': flipped }">
    <div class="card-front">正面内容</div>
    <div class="card-back">背面内容</div>
  </div>
</div>

.card {
  perspective: 1000px;
}
.card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.is-flipped {
  transform: rotateY(180deg);
}
.card-front, .card-back {
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
}

无限滚动动画

实现内容无限循环滚动效果：

<div class="scroller" :style="{ transform: `translateX(${offset}px)` }">
  <div v-for="(item, index) in items" :key="index">{{ item }}</div>
</div>

data() {
  return {
    offset: 0,
    items: [...]
  }
},
mounted() {
  this.animate();
},
methods: {
  animate() {
    requestAnimationFrame(() => {
      this.offset -= 1;
      if (Math.abs(this.offset) > this.$el.offsetWidth) {
        this.offset = 0;
      }
      this.animate();
    });
  }
}

拖拽排序

使用 vue-draggable 库实现拖拽排序：

import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    }
  }
}

<draggable v-model="list">
  <div v-for="(item, index) in list" :key="index">
    {{ item }}
  </div>
</draggable>

视差滚动

根据滚动位置创建视差效果：

data() {
  return {
    parallaxOffset: 0
  }
},
mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    this.parallaxOffset = window.pageYOffset * 0.7;
  }
}

<div class="parallax-bg" :style="{ transform: `translateY(${parallaxOffset}px)` }"></div>

瀑布流布局

使用 CSS columns 或 masonry 布局插件：

<div class="masonry">
  <div 
    v-for="(item, index) in items" 
    :key="index"
    class="masonry-item"
  >
    <img :src="item.image" :style="{ height: item.height }">
  </div>
</div>

.masonry {
  column-count: 3;
  column-gap: 1em;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1em;
}

文字动画

使用 anime.js 实现文字逐个显示效果：

import anime from 'animejs'
export default {
  mounted() {
    anime({
      targets: '.text-anim span',
      opacity: [0, 1],
      duration: 1000,
      delay: anime.stagger(100)
    });
  }
}

<div class="text-anim">
  <span v-for="(char, index) in text" :key="index">{{ char }}</span>
</div>

以上特效实现可根据具体需求进行调整组合，Vue 的响应式特性配合 CSS/JavaScript 动画能力可以创造出丰富的交互体验。