如何用CSS让按钮动画压扁?

Question

就是我要在点击标签页多个按钮的其中一个的关闭的时候让它动画逐渐缩小(宽度变为0, 包括padding, margin)
我养长了好习惯动画尽量用CSS(transition/animation) 而不用JavaScript
这个实现我现在只能用 JavaScript, 因为CSS的逻辑是把width/padding 这些都 animation 为0, 问题是动画前的 width 我无法在CSS得到(JS里用 element.getBoundingClientRect)
用max-content 没有动画
说白了就是如何用CSS实现Chrome在关闭某个标签页时那个标签被压减的动画效果? (如果没办法纯CSS那就要用JS搭配了)
https://school.celwk.com/

Answer 1

你要移除的话，肯定是用js了。对吧。

但是你移除的动画还是css3的，transition就是两个关键帧之间的变化。

el = temp1.children[0];
el.style.width = el.offsetWidth + 'px'
el.style.transition='all 5s'
setTimeout(v=>el.style.width="0px");
setTimeout(v=>{
    el.parentNode.removeChild(el)
}, 5000)

然后我看你用的是flex。你也可以直接改flex