如何在Vue-Cli项目中使用Anime.js？已安装后关联组件与动画文件

Hey there! Let's break down your two questions step by step—since you've already got Anime.js installed as a project dependency via npm, we can skip the setup basics and dive straight into the practical stuff.

There are two common, practical approaches to use external libraries like Anime.js in Vue-Cli:

全局引入（所有组件可用） #

If you plan to use Anime.js across multiple components, set it up globally in your main.js file—this saves you from importing it in every component:

// main.js
import Vue from 'vue'
import App from './App.vue'
import anime from 'animejs'

// Attach Anime.js to Vue's prototype so it's accessible everywhere
Vue.prototype.$anime = anime

new Vue({
  render: h => h(App)
}).$mount('#app')

Then in any component, you can call it directly with this.$anime():

<script>
export default {
  mounted() {
    this.$anime({
      targets: '.my-element',
      opacity: [0, 1],
      duration: 1000
    })
  }
}
</script>

组件内按需引入（推荐，减少打包体积） #

If you only need Anime.js in specific components, import it directly in those files—this keeps your bundle lean:

<script>
import anime from 'animejs'

export default {
  mounted() {
    anime({
      targets: this.$refs.myElement, // Use $refs for precise DOM targeting
      scale: [0.5, 1],
      duration: 800
    })
  }
}
</script>

Assuming you've created an animate.js file to wrap your Anime.js animations (a smart way to keep code organized), here's how to connect it to your Vue components seamlessly:

Step 1: Structure animate.js to export reusable functions #

First, adjust your animate.js to export animation functions instead of running code directly—this makes it flexible to use in different components:

// animate.js
import anime from 'animejs'

// Export a fade-in animation function
export const fadeIn = (element) => {
  anime({
    targets: element,
    opacity: [0, 1],
    duration: 1200,
    easing: 'easeInOutCubic'
  })
}

// Export a slide-up animation function
export const slideUp = (element) => {
  anime({
    targets: element,
    translateY: [60, 0],
    opacity: [0, 1],
    duration: 1000,
    delay: 200
  })
}

Step 2: Import and use these functions in your Vue component #

Now, import the functions from animate.js in your Vue component and trigger them at the right time (usually after the component mounts, so DOM elements exist):

<template>
  <div class="animation-container">
    <!-- Use ref to target this element precisely -->
    <div ref="fadeBox" class="box">Fade In On Mount</div>
    <button @click="startSlideUp">Trigger Slide Up</button>
    <div ref="slideBox" class="box">Slide Up On Click</div>
  </div>
</template>

<script>
// Import the animation functions from your animate.js file (adjust path to match your project)
import { fadeIn, slideUp } from '@/utils/animate.js'

export default {
  mounted() {
    // Trigger fade-in animation when the component finishes mounting
    fadeIn(this.$refs.fadeBox)
  },
  methods: {
    startSlideUp() {
      // Trigger slide-up animation when the button is clicked
      slideUp(this.$refs.slideBox)
    }
  }
}
</script>

<style scoped>
.box {
  width: 150px;
  height: 150px;
  background: #42b983;
  margin: 20px 0;
  opacity: 0; /* Start hidden to make fade/slide animations work */
}
</style>

Quick Tips to Avoid Headaches #

• Always use mounted() instead of created() for DOM animations—created() runs before the component's DOM is rendered, so Anime.js won't be able to find your elements.
• Using $refs to target elements is more reliable than class selectors in Vue—it ensures you only affect elements within the current component, no accidental global DOM changes.
• If your animate.js runs code directly (instead of exporting functions), import it dynamically in the mounted() hook to ensure it executes after the DOM is ready:

  mounted() {
    import('@/utils/animate.js')
  }
  

内容的提问来源于stack exchange，提问作者Mart Cube