<!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>
原文地址：https://www.cnblogs.com/xuyxbiubiu/p/10020013.html
时间： 2024-10-06 06:46:02