这个典故出自《三国演义》，不是正史，我们就按照演义的思路来看下这个问题。

这件事的源头是大将军何进想诛杀十常侍，就和司隶校尉袁绍密谋召边兵入京来干这件事。

没想到事情泄露了，十常侍把何进骗进宫杀掉，袁绍和曹操则率兵闯进宫把十常侍杀了个干净。

按理说，大将军何进统帅在京全部兵马，袁绍这个司隶校尉手下也有几千精兵，杀几个宦官应该不成问题，实在弄不明白俩人为啥号召边兵入京。

何进和袁绍召的边兵就是西凉董卓，洛阳兵变时董卓还在进京的路上，并不知情。

进到洛阳后，才发现大将军何进已死，京中诸将群龙无首，形同一盘散沙。不知道是因为袁绍资历过浅还是因为啥，他没有替代何进的位置。

董卓率大军进京后，填补了权力真空，兼并了何进手下诸军，成了洛阳的实权人物。

董卓无谋，掌握大权后，第一件事不是安抚士民，反而是妄议废长立幼。

在董卓主持的朝会上，董卓宣布废少帝刘辩为弘农王，改立陈留王刘协为帝。

董卓宣布完后，满朝文武重臣无人敢反对，此时高光时刻来了，袁绍愤然起身，大骂董卓是个篡逆之辈。（在正史之中是卢植站起来反对董卓。）

董卓被怒喷一顿，气的七窍生烟，跳起来拔剑说道：“尔要试试我宝剑是否锋利吗？”

袁绍也不甘示弱，拔剑回道：“我剑也未尝不利！”

背景

最近有个小需求需要点击标题展示/折叠文字，并且标题后面还跟着一个svg的下拉图标。大概的效果如下：

我记得之前是有人在掘金上分享如何实现这个下拉图标动画的（貌似不是基于svg？），但我找不到了。。。

一开始，我先去element-plus和ant-design上粗略地看了看有没有类似的下拉图标效果。但我发现貌似就element-plus的select组件上用到了下拉图标旋转的过度动画，和上面的gif预览还有点差异。

因此，我就自己稍微研究了下svg的动画，供自己学习和大家参考～

绘制svg

画一个静态下拉图标

首先，先把默认的图标用svg画出来，代码如下