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、<link rel="stylesheet" href="./index.css">
2、<script src="/node_modules/vue/dist/vue.js"></script>
3、<script src="./index.js"></script>
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;
}
