动画库Animate.css的简单使用

https://animate.style/动画库的官方网址。在首页可以看到各种动画的名称,点击一下可以预览动画的效果。

安装

有三种方式:npm
$ npm install animate.css --save
yarn:
$ yarn add animate.css
CDN 直接添加到网页:
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head>

用法:

在安装完成之后,简单的用法就是在一个标签上添加类,其中animate__animated是必须要添加的,然后就可以添加自己想要的动画效果了。注意一定要在动画名前添加animate__。
比如要使用弹跳bounce的动画效果就可以写成这样animate__bounce。
<script>   const app = Vue.createApp({     template: `      <h1 class="animate__animated animate__rotateOut">An animated element</h1> <div class="animate__animated animate__flipInX">div块</div>     `   })   
const vm = app.mount("#app") </script>
在vue3中使用
结合了vue3中过渡&动画里的内容,自定义过渡 class 类名。
可以通过以下 attribute 来自定义过渡类名:
  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class
template: ` <transition enter-active-class="animate__animated animate__bounce" leave-active-class="animate__animated animate__bounce" > <div v-if="isShow">将要添加动画效果的dom元素</div> </transition> `
 

动画库Animate.css的简单使用

上一篇:随机生成字符串函数


下一篇:k8s登录harbor报错:Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request cance