<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue中css动画原理</title>
<script src="vue.js"></script>
<!-- vue在过渡动画中定义的css样式 -->
<style type="text/css">
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
/* 如果检测到opacity发生了改变，那vue就会让这个改变在3s内完成，从而实现过渡效果 */
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用css原理实现一个过渡动画 -->
<!-- 1：给需要添加动画效果的dom外层套一个transition，
vue就会自动给transition里的dom元素添加class样式，完成一个动画效果-->
<transition>
<div v-if="show">hello world</div>
</transition>
<button type="button" @click="handleBtn">出现/隐藏</button>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleBtn:function(){
this.show=!this.show
}
}
})
</script>
</body>
</html>
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
