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"
		  />

如图所示
Vue css简单特效有手就行 快速上手animate.css库_第1张图片
之后就可以开始你的CSS动画之旅了。

使用方法

点击网站,animate.css库链接
在网页右边有可选动画的名称
Vue css简单特效有手就行 快速上手animate.css库_第2张图片
先选择好自己想要的动画效果,下面直接附上代码


<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">changediv>
			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里填写自己选择好的效果名称即可
Vue css简单特效有手就行 快速上手animate.css库_第3张图片

要求

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

你可能感兴趣的:(javascript,html,css,vue.js)