vue中如何使用animate.css库

简介: vue中如何使用animate.css库

1. 如何vue中使用keyframe动画


举个例子:

1dc618a0ed9580ce8bfa6facb208c08f.png5d4c6812c8535adbb050f4ddf2e1bce8.png

效果:

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

隐藏的时候,有放大缩小的效果,


显示的时候也有放大缩小的效果。


2. 如何自定义动画样式?


1dc618a0ed9580ce8bfa6facb208c08f.png

看下图操作即可:

5d4c6812c8535adbb050f4ddf2e1bce8.png


既然可以自定义vue的动画样式,那同理就可以使用vue的animate.css库


3.如何使用animate.css库动画


46a9d80a6e05e4e3b19d57a0ee70bcdf.png

动画首页网址:

https://animate.style/


66ba272a0bfc97be54a5fa679e3d5482.png


4.如何解决新页面无动画问题


刚才的动画中,刷新页面后,初始动画是没有的,如何设置初始动画呢?

1dc618a0ed9580ce8bfa6facb208c08f.png


5.animate.css和transition动画组合如何使用?


animate.css本质上是使用的@keyframe这种动画,上一篇文章是transition动画,如何组合使用呢?


如下图所示,就有有过渡显示,并且带animate.css样式特效。

5d4c6812c8535adbb050f4ddf2e1bce8.png


6.小问题: animited.css和transition时长哪个为准?


animited样式的时长看源码会看到默认是1s,transition的时长我们设置的是3s,以哪个为准呢?

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

解决方式1: type

66ba272a0bfc97be54a5fa679e3d5482.png

解决方式2: :duration 自定义设置动画时长


也可以更详细的设置:

1dc618a0ed9580ce8bfa6facb208c08f.png

相关文章
|
3月前
|
缓存 JavaScript API
vue3新一代状态管理库 Pinia
vue3新一代状态管理库 Pinia
|
2月前
|
缓存 JavaScript API
vue3新一代状态管理库 Pinia
vue3新一代状态管理库 Pinia
58 1
|
1月前
|
JavaScript
vue尚品汇商城项目-day02【14.vuex状态管理库】
vue尚品汇商城项目-day02【14.vuex状态管理库】
26 0
|
3月前
|
JavaScript 前端开发 API
【Vue 3】一个小巧玲珑的 Vue 组件切换动画库,开源且免费!!
【Vue 3】一个小巧玲珑的 Vue 组件切换动画库,开源且免费!!
【Vue 3】一个小巧玲珑的 Vue 组件切换动画库,开源且免费!!
|
2月前
|
JavaScript 前端开发
react Or vue中引入animate.css
本文介绍了如何在React或Vue项目中引入animate.css库来使用动画效果,包括通过npm安装或在线链接引入,并展示了如何在React组件和Vue路由过渡中使用动画类。
59 0
|
3月前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果,并提供了详细的实现代码和效果演示。
70 0
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
|
3月前
|
资源调度 JavaScript API
解锁一个尚未被 Vue 正式实现的提案或想法集合的库,真的很有趣!
解锁一个尚未被 Vue 正式实现的提案或想法集合的库,真的很有趣!
|
3月前
|
Web App开发 JavaScript 安全
Vue状态管理库Pinia详解
Pinia 是一款专为 Vue 设计的状态管理库,它提供了一套简洁且直观的 API,旨在简化状态管理流程。Pinia 的设计理念强调简单性和易用性,相较于 Vuex,它摒弃了许多复杂的概念如 mutations 和模块的深层嵌套结构,转而提供一种更现代化且与 Vue 3 Composition API 高度兼容的状态管理模式。
|
4月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
143 4
|
4月前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
47 1