vue+ts或者react+ts如何使用animate.css

简介: vue+ts或者react+ts如何使用animate.css


前言

animate.css是一个第三方的纯css库,其中内置了众多我们常用的动画特效,详细特效及文档可以浏览animate.style以及animate.css动画演示,关于源码,可查看animate.css源码

使用animate.css(以vue+ts为例,react可参照类似方法)

  1. 安装
npm i animate.css -S
  1. main.ts中引入
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import animated from 'animate.css'; // 引入animate.css
const app = createApp(App);
app.use(store);
app.use(router);
app.use(animated); // 注册animate.css
app.mount('#app');
window.vm = app;
  1. 此时会提示找不到模块“animate.css”或其相应的类型声明

    那么我们就需要修改shims-vue.d.ts,声明一下animate.css的类型
/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}
declare module '*.png' {
  export const png: any;
}
declare module '*.jpg' {
  export const jpg: any;
}
declare module '*.jpeg' {
  export const jpeg: any;
}
declare module '*.gif' {
  export const gif: any;
}
declare module 'animate.css' // 声明animate.css的类型,否则引入animate.css会报错,提示找不到animate.css模块
declare global {
  interface Window {
    [propName: string]: any;
  }
}
  1. 组件中使用animate.css,需要注意的是,样式class类名,必须加上animate__animated,其次则是要引入动画的class类名,如animate__slideInUp
<template>
  <div class="content-box animate__animated animate__slideInUp">
    滑动进入特效演示
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  setup() {},
});
</script>
<style lang="scss" scoped>
.content-box {
  width: 200px;
  height: 200px
}
</style>
  1. 如果想修改动画的属性,比如执行时间,延迟等等,有以下几种方法
    ①方法1:直接通过动画class类名animated修改
.animated {
    -webkit-animation-duration: 1s; 
    animation-duration: 2s; // 动画执行时间
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
  1. ②方法2:修改指定动画的属性
.animate__slideInUp {
    -webkit-animation-duration: 1s; 
    animation-duration: 2s; // 动画执行时间
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
  1. ③方法3:在要执行动画的div设置stye
<div class="content-box animate__animated animate__slideInUp" :style="{animationDuration: '500ms'}"></div>
目录
相关文章
|
2天前
|
JavaScript 前端开发 API
vue中nextTick函数和react类似实现
vue中nextTick函数和react类似实现
7 0
|
2天前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
3天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
3天前
|
前端开发 JavaScript 安全
【亮剑】探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式
【4月更文挑战第30天】本文探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式。文章分为三部分:首先解释了样式传递的必要性,包括模块化、主题化和动态样式以及TypeScript集成。接着介绍了内联样式的基本用法和最佳实践,展示了一个使用内联样式自定义按钮颜色的例子。最后,讨论了使用CSS模块和TypeScript接口处理复杂样式的方案,强调了它们在组织和重用样式方面的优势。结合TypeScript,确保了样式的正确性和可维护性,为开发者提供了灵活的样式管理策略。
|
3天前
|
开发框架 缓存 前端开发
|
3天前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先,通过 `npm` 安装 less 或 sass 依赖,然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着,详细阐述如何使用 less/sass 编写样式。再者,安装 react-css-modules 并配置 webpack,使能样式模块化。最后,展示了如何结合使用 less/sass 和 react-css-modules,以提升前端开发的效率和代码质量。
|
3天前
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
|
3天前
|
JavaScript 前端开发 API
Vue与React数据流设计比较:响应式与单向数据流
Vue与React数据流设计比较:响应式与单向数据流
|
3天前
|
JavaScript 前端开发 开发者
你知道 React 和 Vue 的区别?
【4月更文挑战第16天】React与Vue是两种流行的前端框架,各有特色。React是JavaScript库,强调组件化和函数式编程,使用虚拟DOM提升性能;Vue是渐进式框架,提供全面解决方案,更易上手。React采用单向数据流和状态管理库如Redux,Vue则有双向数据绑定和响应式系统。组件通信方面,React依赖props和context,Vue更灵活,提供插槽和提供/注入。虚拟DOM实现上,React注重效率,Vue强调易用性。学习曲线方面,React社区活跃但学习难度稍大,Vue文档清晰,易于入门。选择框架应考虑项目需求、团队技能和个人偏好。
11 0
|
前端开发
react的css样式
react的css样式
92 0

热门文章

最新文章