vue实现各种特效

Vue实现动画效果

使用Vue的过渡系统实现元素进入/离开的动画效果。通过<transition>组件包裹需要动画的元素，并定义CSS过渡类名或JavaScript钩子。

<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;
}

Vue实现粒子特效

结合第三方库如particles.js或vue-particles实现背景粒子效果。安装vue-particles后，在组件中直接使用。

npm install vue-particles

<template>
  <div id="app">
    <vue-particles></vue-particles>
  </div>
</template>

Vue实现拖拽排序

使用vuedraggable库实现列表拖拽排序功能。该库基于Sortable.js，提供Vue组件封装。

npm install vuedraggable

<draggable v-model="list" @end="onDragEnd">
  <div v-for="item in list" :key="item.id">{{item.text}}</div>
</draggable>

Vue实现3D效果

借助three.js库创建3D场景和对象。需要先安装three.js，然后在Vue组件中初始化3D场景。

npm install three

import * as THREE from 'three';

export default {
  mounted() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$el.appendChild(renderer.domElement);
  }
}

Vue实现文字打字效果

创建自定义指令实现文字逐个显示的打字机效果。通过定时器控制字符逐个显示。

Vue.directive('typewriter', {
  inserted(el, binding) {
    const text = binding.value;
    let index = 0;

    const timer = setInterval(() => {
      el.textContent = text.substring(0, index);
      if(index++ >= text.length) clearInterval(timer);
    }, 100);
  }
})

<p v-typewriter="'这段文字会逐个显示...'"></p>

Vue实现悬浮效果

使用CSS transform和transition实现元素悬浮动画。结合Vue的数据绑定控制动画状态。

<div 
  :class="{ 'hover-effect': isHover }"
  @mouseenter="isHover = true"
  @mouseleave="isHover = false"
>
  悬浮查看效果
</div>

.hover-effect {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

Vue实现无限滚动

监听滚动事件实现无限滚动加载。计算滚动位置触发数据加载。

export default {
  data() {
    return {
      items: [],
      page: 1,
      isLoading: false
    }
  },
  methods: {
    loadMore() {
      if(this.isLoading) return;

      const scrollPosition = window.innerHeight + window.scrollY;
      const pageHeight = document.body.offsetHeight;

      if(scrollPosition > pageHeight - 300) {
        this.isLoading = true;
        this.page++;
        // 加载数据
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.loadMore);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.loadMore);
  }
}

Vue实现SVG动画

使用SVG结合Vue实现路径动画和图形变换。通过动态绑定SVG属性实现动画效果。

<svg width="100" height="100">
  <circle 
    cx="50" 
    cy="50" 
    :r="radius" 
    fill="blue"
    @mouseover="radius = 40"
    @mouseout="radius = 30"
  />
</svg>

export default {
  data() {
    return {
      radius: 30
    }
  }
}