<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<style type="text/css">
.dv {
200px;
height: 400px;
background-color: black;
transform: translateY(100%);
position: fixed;
right: 0;
bottom: 0;
z-index: 5;
}
.btn {
position: fixed;
right: 0;
bottom: 0;
z-index: 10;
}
.dis {
}
</style>
</head>
<body>
<div id="app">
<div class="dv" v-bind:class="{animated:da,slideOutDown:isactive,slideInUp:!isactive}">
</div>
<button type="button" v-on:click="open">点击</button>
<button type="button" v-on:click="close">点击2</button>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
isactive: true,
da:false
},
methods: {
open: function() {
this.isactive = false;
this.da=true;
},
close:function () {
this.isactive=true;
}
}
})
</script>
</html>