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

就是我要在点击标签页多个按钮的其中一个的关闭的时候让它动画逐渐缩小(宽度变为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/

image

回复
阅读 1.2k
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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏