共计 875 个字符,预计需要花费 3 分钟才能阅读完成。
vue 中显示或者暗藏 DOM 时,提供多种不同的形式来实现动画成果,能够配合应用 css3 动画,也能够应用第三方动画库,如 animate.css。这里咱们应用 vue 提供的 transition 组件。
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<title></title> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"> | |
<script type="text/javascript" src="js/vue.min.js"></script> | |
<style> | |
.popBackground{ | |
width: 300px; | |
height: 200px; | |
background: rgba(0,0,0,0.4); | |
color: #01FEFE; | |
} | |
.fade-enter-active, .fade-leave-active {transition: opacity .8s;} | |
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;} | |
</style> | |
</head> | |
<body> | |
<div id="box"> | |
<div id="demo"> | |
<button v-on:click="show = !show"> | |
Toggle | |
</button> | |
<transition name="fade"> | |
<div v-show="show" class="popBackground"> | |
hello | |
</div> | |
</transition> | |
</div> | |
</div> | |
<script> | |
var box = new Vue({ | |
el: '#box', | |
data () { | |
return {show: true} | |
} | |
}) | |
</script> | |
</body> | |
</html> |
正文完