VUE3.0,DAY55，vue集成第三方动画

集成第三方动画

在npm上有个animate.css，这是一个成型的动画库。（网址），打开网址后搜索animate。

然后打开后该css的详情页面，可以跳转到github上。

随后可以看到如何使用。

输入以下命令按照，在命令行窗口里：npm install animate.css --save
然后在代码中引入。

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>

    <!-- 想让h1有动画的效果，就用transition把他包裹起来 -->
    <transition-group appear>
      <h1 v-show="!isShow">你好啊！</h1>
      <h1 v-show="isShow">你好啊！</h1>
    </transition-group>
  </div>
</template>
<script>
//引入animate.css
import 'animate.css'
export default {
  name: "Test3",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>
<style scoped>
h1 {
  background-color: coral;
  /* 规定过渡效果的时间等设置 */
  transition: 0.5s linear;
}

</style>

然后是基础的使用，在其官网上看到使用说明

想要哪种动画可以点击查看效果后，在点红框内复制代码，粘贴到我们自己的文件中。

最后实现的代码

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>

    <!-- 想让h1有动画的效果，就用transition把他包裹起来,enter-active-class是进入的动画，等号内的内容是从animate官网复制来的 -->
    <transition-group
      appear
      name="animate__animated animate__bounce"
      enter-active-class="animate__swing"
      leave-active-class="animate__backOutRight"
    >
      <h1 v-show="!isShow" key="1">你好啊！</h1>
      <h1 v-show="isShow" key="2">我很好！</h1>
    </transition-group>
  </div>
</template>
<script>
//引入animate.css
import "animate.css";
export default {
  name: "Test3",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>
<style scoped>
h1 {
  background-color: coral;
}
</style>

页面中的效果

注意：要在App.vue中进行相关的配置。

总结