<!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 { width: 200px;height: 400px;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>