vue.js trasition动画效果，vue.js动画
================================
©Copyright 蕃薯耀 2018年12月07日
http://fanshuyao.iteye.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js trasition动画效果</title>
<style type="text/css">
/*xxx-enter-active， xxx-leave-active*/
.myFade-enter-active, .myFade-leave-active {
transition: opacity 1s;
}
.myFade-enter, .myFade-leave-to /* .myFade-leave-active below version 2.1.8 */ {
opacity: 0;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id="vueDiv">
<div style="margin-top: 30px;">
<div v-show="isShow">这是内容显示或者隐藏的动画效果。</div>
<input type="button" value="隐藏/显示" @click="isShow=!isShow"/>
</div>
<div style="margin-top: 30px;">
<div>-----这里加上动画效果-----</div>
<div style="margin-top: 15px;">
<transition name="myFade">
<div v-show="isShowTransition">淡入浅出动画效果。</div>
</transition>
<input type="button" value="隐藏/显示" @click="isShowTransition = !isShowTransition"/>
</div>
</div>
<div style="margin-top: 30px;">
<div>-----这里加上动画效果2-----</div>
<div style="margin-top: 15px;">
<transition name="slide-fade">
<div v-show="isSideFade">淡入浅出动画效果2。</div>
</transition>
<input type="button" value="隐藏/显示" @click="isSideFade = !isSideFade"/>
</div>
</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vueObj = new Vue({
el : "#vueDiv",
data : {
isShow : true,
isShowTransition : true,
isSideFade : true
}
});
</script>
</body>
</html>
================================
©Copyright 蕃薯耀 2018年12月07日
http://fanshuyao.iteye.com/
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
