- 2013 年写六边形指南[1]时用d3.js[2],当时 SVG 中 CSS 过渡有问题,用 JavaScript 过渡替代,如
d3.select(".grid").transition().attr("transform", "rotate(30)")
会使网格旋转,文本也跟着转,需用d3.select(".grid text").transition().attr("transform", "rotate(-30)")
来恢复文本; - 2018 年用 Vue 重写六边形指南[3]时,自己写动画通过 JavaScript 值在 0 到 1 间变化并转为 0°到 30°的角度应用到网格和文本;
- 2016 年 SVG2 增加
vector-effect: non-rotation
[4]来解决旋转文本问题,但 2018 年和 2024 年测试都不生效,有Chrome Bug[8]和Firefox bug[9]; - 之前想用 CSS 过渡[10]但受浏览器限制,2018 年后浏览器新特性和修复很多,决定再试,因为编程更易且可能更快,如从
rotate(0)
到rotate(30)
,JavaScript 过渡需每帧改变所有数字,有 64350 次 HTML 更新,而 CSS 过渡只需改变类一次,有 39 次更新; - 先确保 CSS 过渡可行,设计 CSS 缓动函数并在在线游乐场测试[11],然后分步骤在浏览器中测试实现更改:从
transform
属性到transform
样式仍由 JavaScript 控制、重构样式使网格旋转文本不转、从内联style
到class
并移到全局 CSS、添加 CSS 过渡规则、对不能用 CSS 过渡的元素写 JavaScript 近似值并确保同步; - 遇到 Safari 浏览器的一个 bug,元素进入屏幕时才开始动画,太晚,通过
IntersectionObserver
只在可见元素上触发动画来解决; - 很高兴能简化实现,希望动画在更多设备上运行更平滑,但在自己电脑上无法分辨。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。