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

代码农MJ682517

已于 2023-09-06 10:18:03 修改

阅读量1.7k

点赞数 17

于 2022-02-15 16:35:26 首次发布

本文链接：https://blog.csdn.net/weixin_51157081/article/details/122947184

版权

JavaScript 同时被 3 个专栏收录

203 篇文章 5 订阅

订阅专栏

78 篇文章 1 订阅

订阅专栏

css

71 篇文章 0 订阅

订阅专栏

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;
}