vue+transition+opacity实现淡入淡出、过度、透明度

---

1、HTML部分

<div id="app">
	<div class="transition-box">
		<div :class="{transition: true, 'is-show': isShow}" @click="clickSwitch">
			<span style="font-size: 27px; font-weight: 700;">点击切换span>
		div>
	div>
div>

以上代码需要引入以下文件：
1、
2、
3、

---

2、JavaScript部分

new Vue({
	el: "#app",
    data() {
        return {
            isShow: false,
        }
    },

    methods: {
        clickSwitch() {
            this.isShow = !this.isShow;
        }
    }
});

---

3、css部分

.transition-box {
	width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.transition {
    width: 150px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background-color: #E6A23C;
    border-radius: 30px;
    cursor: pointer;
    /* 过度 */
    transition: all 1s;
    /* 透明度为0，完全透明 */
    opacity: .3;
}

.is-show {
    height: 150px;
    line-height: 150px;
    border-radius: 0;
    /* 透明度为1，就是不透明 */
    opacity: 1;
}

---

4、效果演示

4.1、微信小程序码

---

4.2、普通二维码

---

5、完整代码

gitee(码云) - develop分支 - fadeInFadeOut 文件夹