Animate.css

Animate.css是一个纯CSS动画库。比较老的一个动画库了，但是还是非常受欢迎，目前有74.7k颗星

官方文档Animate.css

安装、引入

安装

npm install animate.css --save

引入
在main.ts中引入

import 'animate.css';

基本使用

安装 Animate.css 后，将类animate__animated与任何动画名称一起添加到元素（不要忘记animate__前缀！）：

<h1 class="animate__animated animate__bounce">An animated element</h1>

demo：

<template><div class="item animate__animated" id="item"> </div>
</template><script setup lang="ts">
import { onMounted } from 'vue'onMounted(() => {let dom = document.getElementById('item')dom?.addEventListener('mouseover', () => {dom?.classList.add('animate__bounce')})dom?.addEventListener('mouseout', () => {dom?.classList.remove('animate__bounce')})
})
</script><style scoped>
.item {width: 100px;height: 100px;background-color: red;
}
</style>

使用@keyframes

除了直接使用类外，同样支持在keyframes中使用

<div class="item"> </div>.item {width: 100px;height: 100px;background-color: red;&:hover {animation: bounce;animation-duration: 2s;}
}

注意： 某些动画依赖于animation-timing动画类上设置的属性。更改或不声明它可能会导致意想不到的结果。

CSS 自定义属性（CSS 变量）

从版本 4 开始，Animate.css 使用自定义属性（也称为 CSS 变量）来定义动画的持续时间、延迟和迭代。这使得 Animate.css 非常灵活和可定制。需要更改动画持续时间？只需在全局或本地设置一个新值。

重复两次

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
// animate__infinite不断循环

除了直接使用类，也可以在css中使用

.item {--animate-repeat: 5;width: 100px;height: 100px;background-color: red;animation: bounce;animation-duration: 2s;
}

没效果，当然可能不是这样用

其他内容略，自行查看官方文档

gsap

最近在看vue过渡时，看到vue官方文档提到了 gsap 库，这个库是：适用于现代网络的专业级 JavaScript 动画，反正挺好用的
下面结合vue，说一下基础用法，其他用法可以看官方文档

安装和引入

npm install gsapimport gsap from 'gsap'

gsap.to()

语法

gsap.to(el,{})

通过gsap.to()来声明原生的最终效果，参数1表示要执行动画dom，参数2是一个对象，里面是要执行的动画属性

gsap.to()官方文档

<template><div><el-button type="primary" @click="moveToRight">右移</el-button><div class="demo" id="demo"></div></div>
</template><script setup lang="ts">
import gsap from 'gsap';let moveToRight = () => {let dom = document.getElementById('demo')gsap.to(dom, {//右移200pxx: 200,//动画的执行时间2sduration: 2,//延迟1s执行delay: 1,//动画执行完成的回调onComplete: () => {console.log("动画执行完了")}})
}
</script><style scoped lang="scss">
.demo {width: 100px;height: 100px;margin-top: 30px;background-color: red;
}
</style>

一般情况下这一个函数就够用了，如果动画比较复杂的话，可以使用提供的其他方法，这里就不介绍了，没有仔细研究。

示例

数值更新

<template><div class="app"><input type="number" step="100" v-model="counter"><h2>当前计数: {{ showNumber ? showNumber.toFixed(0) : 0 }}</h2></div>
</template><script lang="ts">
import gsap from 'gsap';export default {data() {return {counter: 0,showNumber: 0}},watch: {counter(newValue) {gsap.to(this, { duration: 1, showNumber: newValue })}}
}
</script>

本来是打算用setup的形式来写的，但是vue官方文档给的是2.0的格式，setup格式试了半天都没有成功，只好放弃了，有知道怎么写的大佬，麻烦说一下。

跟进列表

<template><div><div><el-button type="primary" size="small" @click="getData">加载</el-button></div><transition-group :css="false" @before-enter="beforeEnter" @enter="enter" class="list" tag="div"><div class="list-item" v-for="(item, index) in list" :key="index" :data-index="index"><span style="margin-right: 10px;">{{ item }}</span></div></transition-group></div>
</template><script setup lang="ts">
import gsap from 'gsap'
import { ref } from 'vue'let list = ref<number[]>([])let getData = () => {list.value = [1, 2, 3, 4, 5, 6]
}let beforeEnter = (el) => {el.style.opacity = 0el.style.paddingTop = '30px'
}let enter = (el, done) => {gsap.to(el, {opacity: 1,paddingTop: 0,delay: el.dataset.index * 0.15,onComplete: done})
}</script><style scoped lang="scss">
.list {width: 1000px;margin-top: 30px;.list-item {width: 200px;height: 40px;line-height: 40px;text-align: center;border: 1px solid #ddd;}
}
</style>

搜索过滤

<template><div><el-row :gutter="20"><el-col :span="4"><el-input v-model="filterText" placeholder="请输入关键字"></el-input></el-col><el-col :span="2"><el-button type="primary" @click="search">搜索</el-button></el-col></el-row><transition-group name="staggered-fade" tag="ul" :css="false" @before-enter="beforeEnter" @enter="enter"@leave="leave"><li v-for="(item, index) in result" :key="item" :data-index="index">{{ item }}</li></transition-group></div>
</template><script setup lang="ts">
import gsap from 'gsap'
import { ref } from 'vue'let list = ref(['东方耀', '孙悟空', '猪八戒', '李白', '东方镜', '李信'])
let result = ref(['东方耀', '孙悟空', '猪八戒', '李白', '东方镜', '李信'])let filterText = ref('')let search = () => {result.value = list.value.filter(e => e.includes(filterText.value))
}let beforeEnter = (el) => {el.style.opacity = 0el.style.height = 0
}
let enter = (el, done) => {gsap.to(el, {opacity: 1,height: '1.6em',delay: el.dataset.index * 0.15,onComplete: done})
}
let leave = (el, done) => {gsap.to(el, {opacity: 0,height: 0,delay: el.dataset.index * 0.15,onComplete: done})
}</script><style scoped lang="scss">
.list {margin-top: 30px;.list-item {height: 40px;line-height: 40px;}
}
</style>

animate.css、gsap相关推荐

Vue + Element + animate.css 音乐网站（网易云版）
Vue + Element + animate.css 音乐网站一.前言这是小弟的毕业设计,也是第一次用vue框架独立开发网站,现在接入了网易云api,到后面我还会做对应的后端和管理端.因为是第一 ...
animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...
功能简介基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
前端之vue3使用动画库animate.css(含动画、过渡)
动画与过渡一.动画效果 1.默认动画实例动画语法 2.给transition指定name 二.过渡效果三.多个元素过渡四.vue3使用动画库动画库animate.css √ 五.总结一. ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
使用animate实现页面过度_很多人都在使用的开源CSS动画效果库——animate.css
介绍 animate.css是一堆很酷,有趣且跨浏览器的动画,供你在项目中使用.非常适合强调,主页,滑块和一般的加水效果. animate.css v4正在进行许多改进和重大更改,包括CSS自定义属性 ...
animate.css（第三方动画使用方法）
animation 语法: animation: name duration timing-function delay iteration-count direction; animation-na ...
animate中使用HTML5,animate.css怎么使用？
animate里面包含了许多常用的css动画,我们要使用的它的话需要把它加到自己的页面中,接着就可以在需要动画的元素标签上直接调用里面的动画,然后调节动画次数延迟等达到自己需要的效果就可以了. ani ...
css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
animate.css动画样式详解
一.使用步骤 <!-- <link rel="stylesheet" href="https://www.jq22.com/jquery/animate-3. ...

animate.css、gsap