本人生活在一个3线小城市，本地的企业在考虑mvvm框架的时候，几乎都选择了Vue，
灵活、生态齐全、学习成本低、配套文档和相关教程丰富等等一系列的优势，使得Vue这个框架在国内异常火爆。而且最近出了uni-app，号称一套代码可以编译出多套代码，大大的减轻开发工作量。所以，我也随大流，踏入Vue。
本系列实例都是简单的Vue功能演示，纯属个人学习记录用，大神请绕行。
隐藏到显示
在点击一瞬间，给标签添加classfade-enter、fade-enter-active；然后再加上classfade-enter-to,去除classfade-enter，保留classfade-enter-active；然后所有class都可以自定义。
image.png
显示到隐藏
原理同上；
image.png
基于之前动态组件的例子，添加<transition name="fade">动态组件</transition>包裹在需要添加动画的组件外。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello world</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style>
.style1 {
line-height: 150%
}
.fade-enter {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-enter-active {
transition: opacity 1s;
}
.fade-leave {
opacity: 1;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app" class="style1">
<transition name="fade">
<component :is="type"></component>
</transition>
<button @click="toggle">点击</button>
</div>
</body>
</html>
<script>
var childone = {
template: `<div>child-one</div>`,
};
var childtwo = {
template: `<div>child-two</div>`,
};
var app = new Vue({
el: "#app",
components: {
"child-one": childone,
"child-two": childtwo,
},
data: {
type: "child-one"
},
methods: {
toggle: function () {
this.type = this.type == "child-one" ? "child-two" : "child-one";
}
}
})
</script>
网友评论