vueプロジェクトでAnimate.cssアニメーションライブラリを使用するときに効果がないという問題を解決するには、vueプロジェクトでAnimate.cssアニメーションライブラリを使用します

1.インストール

コマンドラインで実行します。

npmまたはcnpmを使用してインストールします

npm install animate.css --save  或 cnpm install animate.css --save

2.はじめに

main.jsでグローバルに導入

import animated from 'animate.css'
Vue.use(animated)

3.ページの使用法

トランジションクラス名をカスタマイズしてアニメーションライブラリの効果を使用し、クラス名を追加しますanimated。bounceIn、bounceOutは必要なアニメーション効果です。

<template>
  <div class="hello">
    <h1>使用Animate.css动画库:</h1>
    <button @click="showAnimate = !showAnimate">Toggle render</button>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated bounceIn"
      leave-active-class="animated bounceOut"
    >
      <p v-if="showAnimate">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
    
    
  name: "HelloWorld",
  data() {
    
    
    return {
    
    
      showAnimate: true,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

ページを開くと、効果がないことがわかります。以下が解決策です

4.ピットを踏む

それでも最初の3つの部分が効果的でない場合は、animate.cssバージョンに問題がある可能性があります。

直接インストールは最新バージョンであり、vueの公式ウェブサイトではバージョン3.5.1が導入されています。

バージョンを変更します。

最初にアンインストールします。

Npmまたはcnpmのアンインストール：

npm uninstall animate.css --save

cnpm uninstall animate.css --save

再インストール：

npmまたはcnpmのインストール：

npm install [email protected] --save 

cnpm install [email protected] --save

インストールが完了したら、プロジェクトを再起動して問題を解決してください。

5.効果

6.リファレンス

• vueプロジェクトでanimate.cssを使用する方法