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;">点击切换 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 文件夹