背景

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

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


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


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

绘制svg

画一个静态下拉图标

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





标签: none

添加新评论