SOURCE

const el = document.querySelector('.test')
const el1 = document.querySelector('.test1')


const fn = ()=>{
    let value = el.getBoundingClientRect().height
    let value1 = el1.getBoundingClientRect().height
    console.log(value,value1)
    // value === 0 ? el.style.height = '100px' : el.style.height = '0px'
    // value1 === 0 ? el1.style.height = '100px' : el1.style.height = '0px'
    value === 0 ? el.style.display = "block" : el.style.display = "none"
    value1 === 0 ? el1.style.display = "block" : el1.style.display = "none"
}

<div class="test"></div>
<div class="test1"></div>
<br/>
<button onclick="fn()">点击切换动画</button>

<main></main>

.test{
    height:100px;
    width:0px;
    background:red;
    transition:all 10s ease-in-out;
}
.test1{
    height:100px;
    width:100px;
    background:blue;
    transition:all 10s ease-in-out;
}