怎么解决vue使用animate.css失效的问题

2,567 阅读1分钟

animate.css使用4.0版本以上的,一定要加前缀animate__

!!!注意,是两个_!!!

vue官方文档使用的是3.1版本,所以示例代码没有前缀animate__

<transition
    enter-active-class="animate__animated animate__tada"
    leave-active-class="animate__animated animate__bounceOutRight"
  >
    <p v-if="show">hello</p>
</transition>

使用animate.css

直接用CDN的话:

  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

用npm的话:

npm install animate.css --save
# 或者
yarn add animate.css

全局引用的话:

// main.js
import animated from "animate.css";
Vue.use(animated);

局部网页使用的话:

import "@/../node_modules/animate.css/animate.css";

引用