javascript - 动画底部边框(从左到右)

Question

我试图让底部边框从左到右。我似乎也无法将它直接定位在标题下方，并且它从中心向外动画。我不确定要更改什么。

https://jsfiddle.net/81uo76hx/2/

.slider {
position: absolute;
display:block;
left: 50%;
top:90%;
transform: translate(-50%, 0);
position:absolute;
top:43%;
margin:0 auto;
height: 2px;
background-color: #000;
width: 0%;
}

Answer 1

希望你能用 javascript 触发那个动画，你可以用带有过渡的纯 CSS 来实现，并将 right 从 100% 设置为 0，并将额外的类作为动画 transition: right 4s;

.slider 现在位于 #name div 中，因此它会随之移动并且顶部/左侧将相对于此文本

https://jsfiddle.net/0ou3o9rn/

带有 CSS 动画的版本(在 javascript 中添加 animated 类，但您可以以某种方式将其绑定(bind)到悬停或创建时的其他事件) https://jsfiddle.net/tto1vrz5/