Vue css简单特效有手就行快速上手animate.css库

最新推荐文章于 2024-05-21 14:15:14 发布

做只努力的小咸鱼

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量378

点赞数 3

文章标签： javascript html css vue.js

本文链接：https://blog.csdn.net/qq_52340302/article/details/114712295

版权

介绍

animate.css库提供了各种CSS的动画效果，用户可以通过简单的几行代码轻松将里面的动画效果运用到自己的项目中。

animate.css库链接（点这里…点这里）

添加animate.css库

第一步：
使用CDN直接将其添加

<link
		    rel="stylesheet"
		    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
		  />

如图所示
在这里插入图片描述
之后就可以开始你的CSS动画之旅了。

使用方法

点击网站，animate.css库链接
在网页右边有可选动画的名称
在这里插入图片描述
先选择好自己想要的动画效果，下面直接附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link
		    rel="stylesheet"
		    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
		  />
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="root">
			<transition
				name="fade"
				enter-active-class="animate__animated animate__swing"
				leave-active-class="animate__animated animate__shakeX"
			>
				<div v-show="show">change</div>
			</transition>
			<button @click="handleClick">特效改变</button>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#root",
				data: {
					show: true
				},
				methods:{
					handleClick:function() {
						this.show = !this.show
					}
				}
			})
		</script>
	</body>
</html>

格式为animate_XXX,只需在XXX里填写自己选择好的效果名称即可
在这里插入图片描述

要求

必须要使用自定义的class名字的形式来使用animate.css
必须遵循固定的格式来使用（请参照上方代码）

做只努力的小咸鱼

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue css简单特效有手就行快速上手animate.css库

介绍animate.css库提供了各种CSS的动画效果，用户可以通过简单的几行代码轻松将里面的动画效果运用到自己的项目中。animate.css库链接（点这里…点这里）添加animate.css库第一步：使用CDN直接将其添加<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />如图所示之后
复制链接

扫一扫