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

Posted 2022-02-22 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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、<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;