<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>在Vue中使用 animate.css 库</title> ???<script src="./vue.js"></script> ???<link rel="stylesheet" type="text/css" href="./animate.css"> ???<style> ???????/*@keyframes bounce-in {*/ ???????????/*0%{*/ ???????????????/*transform:scale(0);*/ ???????????/*}*/ ???????????/*50%{*/ ???????????????/*transform:scale(1.5);*/ ???????????/*}*/ ???????????/*100%{*/ ???????????????/*transform:scale(0);*/ ???????????/*}*/ ???????/*}*/ ???????/*自定义属性名称*/ ???????/*.active{*/ ???????????/*transform-origin:left center;*/ ???????????/*animation:bounce-in 1s;*/ ???????/*}*/ ???????/*.leave{*/ ???????????/*transform-origin:left center;*/ ???????????/*animation:bounce-in 1s reverse;*/ ???????/*}*/ ???????/*.fade-enter-active{*/ ???????????/*transform-origin:left center;*/ ???????????/*animation:bounce-in 1s;*/ ???????/*}*/ ???????/*.fade-leave-active {*/ ???????????/*transform-origin:left center;*/ ???????????/*animation:bounce-in 1s reverse;*/ ???????/*}*/ ???</style></head><body><div id="root"> ???<transition ???????name="fade" ???????enter-active-class="animated lightSpeedIn" ???????leave-active-class="animated lightSpeedOut"> ?<!--加动画效果 使用animate库 必须class命名注意 class类里面必须包含animated这个单词加上动画效果名称--> ???????<div v-show="show">hello world</div> <!--v-if与v-show都是可以带动画效果的--> ???</transition> ???<button @click="handleClick">toggle</button></div><script> ???var vm = new Vue({ ???????el: ‘#root‘, ???????data: { ???????????show: true ???????}, ???????methods: { ???????????handleClick: function () { ???????????????this.show = !this.show ???????????} ???????} ???})</script></body></html>在Vue中使用 animate.css 库
原文地址：https://www.cnblogs.com/xuyxbiubiu/p/10020013.html