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