<!-- bower-> （前端）包管理器
npm install bower -g
验证: bower --version
bower install <包名>
bower uninstall <包名>
bower info <包名> 查看包版本信息
<script src="bower_components/vue/dist/vue.js"></script>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
#div1{
width:100px;
height:100px;
background: red;
}
.fade-transition{ //整体动画
transition: 1s all ease;
}
.fade-enter{ //进入：
opacity: 0;
}
.fade-leave{ //离开：
opacity: 0;
transform: translateX(200px); //右边飞
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" v-show="bSign" transition="fade"></div> <!--transition="fade" 固定写法：动画名称-->
</div>
<script>
new Vue({
el:‘#box‘,
data:{
bSign:true
},
methods:{
/*toggle:function(){
alert(1);
}*/
toggle(){//es6语法，等价上面写法，
this.bSign=!this.bSign;
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
<!-- animate.css动画库 -->
<style>
#box{
width:400px;
margin: 0 auto;
}
#div1{
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div>
<script>
new Vue({
el:‘#box‘,
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
},
transitions:{ //定义所有动画名称
bounce:{//动画名称 transition="bounce"
enterClass:‘zoomInLeft‘,
leaveClass:‘zoomOutRight‘
}
}
});
</script>
</body>
</html>
时间： 2024-10-03 00:03:26