前端动画的几种实现方式
vue自带过渡动画
Vue 提供了
transition
的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
-
vue+animate.css简单动画+过度动画
实现方式:
安装或者下载animate
npm
npm install animate.css --save
yarn
yarn add animate.css
CDN
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head>
代码部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="lib/vue.js"></script> <link rel="stylesheet" href="lib/animate.css" /> </head> <body> <div id="app"> <div> <input type="button" value="显示/隐藏" @click="show=!show"> <transition enter-active-class="animate__animated animate__bounceInUp" leave-active-class="animate__animated animate__bounceOutDown"> <h3 v-if="show">过渡动画</h3> <!--通过一个标识符,然后可以不停将转换true/false,达到隐藏显示的目的--> </transition> <!--将需要转换的动画用transition承载,在头部实现样式--> <!--:duration可以一同设置进场和出场的时间,:duration="{enter:1000,leave:4000}分别设置"--> </div> </div> <script> var vm = new Vue({ el: "#app", data: { show: false } }) </script> </body> </html>
效果: