javascript - 在::使用 jquery 后复制 CSS 动画

Question

所以我做了很多搜索，但似乎找不到另一个有帮助的问题。但是我觉得这可能是一个常见问题，所以无论如何都可能重复。

当我悬停一段文本时，我有一个非常漂亮的 CSS 下划线动画，您可以在此处查看示例:

let options = ['Over Here', 'This Way', 'At Me']

$(document).ready(function () {
  let jobInterval = setInterval(() => changeText(), 3000)
})

function changeText () {
  let newText = options[Math.floor(Math.random() * options.length)]
  $('#change').text(newText)
}

#change {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
#change:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width 3s ease, background-color 3s ease;
}
#change:hover:after {
    width: 100%;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>
    <span>Look </span>
    <span id="change">Over Here</span>
  </h1>
</div>

https://jsfiddle.net/6b2cqrj7/7/

但是，我不希望它在悬停时完成。我的想法是，我有一段文本每 X 秒更改一次，我希望下划线动画 X 秒，然后单词切换并再次播放动画。就像一个小计时器栏。

我已经尝试了各种方法，但是因为我无法使用 JS/JQuery 操作::after 标记，所以我不知道如何让它工作。因为动画是在::after 标记上发生的，所以我不能只添加一个新类，我需要更改 CSS 的值以便应用转换。我想。

这是我第一次真正尝试使用 CSS 动画，所以我在这里很困惑。

Answer 1

使用 CSS3 关键帧 获得所需的结果。

let options = ['Over Here', 'This Way', 'At Me']

$(document).ready(function () {
  let jobInterval = setInterval(() => changeText(), 3000)
})

function changeText () {
  let newText = options[Math.floor(Math.random() * options.length)]
  $('#change').text(newText)
}

#change {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
#change:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    animation: myLine 3s ease infinite;
    transition: width 3s ease, background-color 3s ease;
}
#change:hover:after {
    width: 100%;
    background: red;
}

@keyframes myLine{
  from {width: 0; background: transparent;}
  to {width: 100%; background: red;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>
    <span>Look </span>
    <span id="change">Over Here</span>
  </h1>
</div>

希望对你有帮助