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