对于小伙伴都关心不再需要JavaScript的五个任务和html5 css 需不需要js的话题，你都想知道有那些呢？接下来让小编带你了解一下。
作者黄子仪
有些功能很难使用Javascript来实现，因此您应该使用技术工具的组合，而不是仅仅依赖JS。本文首先通过五个示例来说明不一定需要在Javascript中执行的功能。
如果您关注JS太久，您可能会养成使用Javascript实现某些功能的习惯，而忘记HTML和CSS也具有某些功能属性。事实上，有些功能很难用Javascript来实现，所以需要综合利用技术工具，而不是仅仅依靠JS。
本文首先通过五个示例来说明不一定需要在Javascript中执行的功能。
大纲
使用CSS控制SVG动画
在原来的文章中，我画了一个例子，基本上是使用CSS来控制一个svg来燃放烟花来创建动画效果。这是核心代码
TrailkeyframesTrail100,to可以看到，Stroke-dashray主要是用来控制实线和虚线的样式，动画效果是通过改变Stroke-dash偏移量来实现位移。指定线条的起点，达到“画”线的效果。CSS样式非常适合在svg中绘制的路径。
侧边栏
仅在鼠标悬停时出现的侧边栏可以完全使用CSS实现。
navnav:hover,nav:focus-within关键是在hover时设置translate属性可以让你偏移元素，而translateX100可以让你移动当前元素宽度的位置。
另一个有趣的事情是，当我使用TABS按钮聚焦于侧边栏中的某个元素时，我希望侧边栏也出现。为了实现这一点，我可以直接使用focus-within。如果需要在鼠标悬停后延迟显示，可以使用过渡延迟属性。
粘性位置
要锚定元素，请使用position:贴纸。
该元素将始终显示在其父容器中，但一旦出现在视口中，如果顶部超过2em，它将被锚定并保持其位置。
使用JS进行决策相当复杂，因为需要监控父元素的滚动，并且由于JS和CSS的执行是异步的，因此位置变化时可能会出现一些抖动。然而，通过仅使用CSS来描述此行为，浏览器可以解决转换过程中的抖动题。
手风琴菜单
此外，如果您需要在交互期间将状态传递给另一个元素以进行响应，请尝试使用Javascript来实现此目的。CSS伪类可以帮助你实现大部分功能，但是如果你想监听状态变化并发送请求，CSS就无能为力，或者你必须使用非常棘手的CSS来实现，这也对你的CSS不利技术选择.初衷。
最后，能够在合适的场景下选择CSS解决方案，也是一种技术选择能力，不要忘记CSS这个领域，不要依赖Javascript来实现每一个功能。
No Comment