主要是emacs-china社区高手多 
，在这问一般会解决，如果去javascript社区问可能没这么快。
我看其它也有问啊 JavaScript 什么的… 编程有关的不都可以吗…
不行呢, 修改scale 的时候旁边的标题栏不会动啊 (另外通过transform-origin: left可以让它向左, 默认是center)
我说的宽度是指标题栏, 例如下面有4个标题栏:
我在关闭其中任何一个的时候想要动画压减至0(就像Chrome浏览器关闭标签的时候)
这个感觉不是什么好兆头。。。 
不久之前有人把这当qq空间来写小说和博客来着,所以大家的敏感度稍微提高了些. 
正常情况应该没啥,但这是emacs社区,这类问题"短时间"内出现太多,还是会觉得不太合适的.
没必要关啊, 你这种又不是来写小说又不是来写博客,只是认真问个问题.
Emacs 这程序本身是就以万能著称的啊(比起 vi 的优势)
好的, 那我少问 Lisp 无关的代码…
[请问这帖子怎么关闭咯?]
我觉得只要提问的人还在用emacs或者写lisp那就没问题(抱团取暖)，毕竟emacs、lisp已经那么小众了，找同类困难，我身边找不到任何一个用emacs的人（大都不知道emacs是啥）。如果不用emacs，不用lisp的又来这里水的，才应该删掉
2 个赞
嗯, 所有做前端的都要用CSS吧? 但是像我(全栈)这样后端用Lisp的屈指可数…
我这要做的网站后端也是要用Common Lisp:
你这个 tab 肯定要借用 css + js 实现的。因为你的操作分为两个步骤:
- 执行缩小动画
- 删除这个元素
一般如果使用框架的话都会有别的库实现，但是我主要说下原生方法吧
首先点击关闭的时候使用 js 给这个元素加上一个动画类名，例如 ‘will-closing’
.will-closing {
width: 0;
padding: 0;
animation: all .3s ease;
}
加上这个类名之后再启动一个定时器，在动画结束时删除这个元素
setTimeout(() => {
// remove dom
}, 300);
不需要获取元素大小，动画也是使用css实现，只是用js动态增加类名和最终移除操作。
你不需要用 setTimeout 而应该用 onanimationend 了
你是指 transition 吗?(不然需要动画名啊)
这两个都不可行, 因为 width 的初始值不知道的(max-content)
目前我只想到了一个通过 min-width 来触发 animation (from 100px to 0px )
不好意思，css打错了，确实是 transition。
使用transition 无需知道 width 值呀？直接 width -> 0 就出现动画了。
不行，width需要是一个具体的值才可以，如果width没设置是根据内容自动撑开的话，是没有过渡动画效果的。
可以再外面加一层元素，然后内层元素设置max-width: 100%;，然后隐藏元素添加一个class比如hide，
然后hide的内容是重新设置max-width: 0px;然后再加上transition过渡就可以了
点击事件开始的时候将width设置上去，然后马上将width设为0，动画还是用transition过渡动画。
我用react撸了一个例子:
import { FC } from 'react';
import styles from './test.module.scss';
const testList = [
'咨询列表',
'员工管理',
'课程管理',
'学员统计',
'账单统计',
'管理员账号',
];
const Test: FC = () => {
return (
<div>
<ul className={styles.list}>
{testList.map((text) => (
<li
className={styles.item}
key={text}
onClick={(e) => {
const w = e.currentTarget.clientWidth;
e.currentTarget.style.width = `${w}px`;
/* 触发浏览器重新渲染，使上面的设置生效，使过度动画顺滑 */
e.currentTarget.clientWidth;
e.currentTarget.style.width = '0px';
e.currentTarget.classList.add(styles.hide);
}}
onTransitionEnd={(e) => e.currentTarget.remove()}
>
{text}
</li>
))}
</ul>
</div>
);
};
export default Test;
scss
.list {
display: flex;
margin: 0px;
padding: 0px;
li {
display: flex;
justify-content: center;
flex-shrink: 0;
list-style: none;
margin-right: 20px;
white-space: nowrap;
overflow: hidden;
transition: all 0.2s linear;
}
.hide {
margin-right: 0px;
}
}
transform属性不起作用是因为transform仅仅是改变显示效果而已，元素所在的位置和大小再文档里面是不会有任何改变的，之前该在哪里还是在哪里，该占多大的宽高还是占多大的宽高。
说白了transform就只是个障眼法而已
设置好对应的样式，不需要知道宽度也可以。
如果动画时间放慢一点, 其实也看得出是瞬间就宽度减小为 40px (padding左右各 20, width瞬间 0)
就是也没有(像浏览器的 tab)那么完美平滑了
不过动画时间(transition)短的话也不明显, 还好
关键就是这个了, 这句代码是 CSS 取代不了的了(max-width不能动画)
我实现提交了 你可以打开多几个 tab 再关闭看看, 跟你的思路一样的(用 Vue3)
哈哈，是的，我这次也不反对
emacs-china 能不能成为万能的编程社区不知道，但别成为万能的灌水社区 
4 个赞