ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

动画库Animate.css的简单使用

2021-08-09 20:04:16  阅读:225  来源: 互联网

标签:__ 动画 app class 添加 animate 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> `  

标签:__,动画,app,class,添加,animate,Animate,css
来源: https://www.cnblogs.com/yang-cy/p/15120256.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有