关于Anime.js官网首个示例square类CSS属性的技术问询

嘿，这个问题问得挺细致的！我来给你拆解一下：

原示例未设置square类CSS属性的原因 #

• 核心聚焦动画逻辑：官网的这个示例核心是展示Anime.js最基础的用法——通过CSS选择器定位目标元素，然后应用动画属性。为了让代码更简洁，突出anime()函数的关键参数（比如targets指定元素、translateX定义动画），所以省略了非核心的样式代码。
• 全局样式复用：官网的所有演示示例都是在同一个页面框架下运行的，他们的全局样式表已经统一设置了这类演示元素（比如square）的基础样式（宽高、背景色等）。所以单独拎出来的示例代码里不需要重复写这些样式，避免冗余。

自行添加square类样式是否合理 #

绝对合理，甚至可以说是必要操作！
如果你是在自己的独立项目里复现这个示例，没有官网的全局样式支撑，这个square元素就是一个看不见的空div，动画执行了你也完全看不到效果。你可以根据自己的需求自定义样式，比如：

.square {
  width: 50px;
  height: 50px;
  background-color: #61dafb;
  pointer-events: none;
}

只要保证元素能在页面上正常显示，Anime.js的动画就能正常作用在它上面，甚至你还可以调整样式让动画效果更直观~

内容的提问来源于stack exchange，提问作者hochan