添加 CSS animation 到 h1 使用 JQuery 或 Z686155AF75A60AED7F6E9D80CF1 单击按钮

Question

所以...我有一个 h1 和一个按钮。 我想将使用 CSS 创建的 animation 添加到使用CSS单击按钮的JQuery中。

当您单击按钮时， animation 应该向h1添加更多内容。 我希望它在我单击按钮时启动，但它会在我加载HTML时立即启动。

由于我对这项技能不熟悉，因此我无法理解其他复杂的答案。 请帮帮我。

这是HTML ：

<div class="container-fluid center" id="mainPage">
    <div id="heading" class="row">
        <h1 id="wishH1">NAME!</h1>
    </div>
</div>
<div class="container-fluid center" id="gift">
    <button type="button" id="giftButton">
        <img id="giftImg" src="gift.png">
    </button>
</div>

这是 CSS：

@keyframes wish {
  25% {
    content: : "hi ";
  }
  50% {
    content: : "hello ";
  }
  75% {
    content: "hola ";
  }
}

#wishH1::before {
  content: "hey there ";
  animation: wish 20s linear infinite;
}

这是JQuery ：

不同的评论显示了在从CSS中删除 animation 部分后我尝试做的不同的事情，但他们甚至没有启动 animation ...

$('#giftButton').click(function() {
  $("#gift").fadeOut(1500);
  /*$("#wishH1").css("animation",wish);
    $("#wishH1").css("animation-duration",6s);
    $("#wishH1").css("animation-timing-function",linear);
    $("#wishH1").css("animation-iteration-count",infinite);*/
  /*$("#wishH1").animate({animation: "wish 6s linear infinite"});*/
  /*("#wishH1").css("animation-play-state","running");*/
  setTimeout(function() {
    $("#gift").fadeIn(1500);
  }, 20000);
});

h1变化如下：

hey there NAME!

hi NAME!

hello NAME!

hola NAME!

现在，只要我启动 html，它就会开始播放 animation，但我希望它在单击按钮后播放。

我在html和css中还有一些其他内容，但为了简短起见，我删除了不相关的内容。 请让我知道我应该在JQuery中添加或删除的位置和内容，或从CSS中删除以获得所需的 output。 谢谢！

PS，因为这是我的第一个问题，可能无法正确描述。 带来不便敬请谅解。

Answer 1

您需要在单击后激活 animation 但您不能 select 伪元素（ ::before部分）在 jQuery 中，因为它们不是 DOM 的一部分。 但是您可以将特定的 class ( animation-start ) 添加到父元素并在 CSS 中控制其伪元素。

 $('#giftButton').click(function() { $("#gift").fadeOut(1500); $('#wishH1').addClass('animation-start'); setTimeout(function() { $("#gift").fadeIn(1500); }, 20000); });

 @keyframes wish { 25% { content: "hi "; } 50% { content: "hello "; } 75% { content: "hola "; } } #wishH1::before { content: "hey there "; } #wishH1.animation-start::before { animation: wish 5s linear infinite; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid center" id="mainPage"> <div id="heading" class="row"> <h1 id="wishH1">NAME.</h1> </div> </div> <div class="container-fluid center" id="gift"> <button type="button" id="giftButton"> <img id="giftImg" src="gift.png"> </button> </div>

您的 CSS 中还有额外的分号，可能会给您带来一些麻烦。

@keyframes wish{
25%{
    content:: /* here */ "hi "; 
}
50%{
    content:: /* here */ "hello "; 
}
75% {
    content: "hola ";
}

Answer 2

问题是在 css 代码上，您直接设置了 animation。 您需要在点击时添加 animation。

像这样的东西：

css

@keyframes wish{
25%{
    content: "hi ";
}
50%{
    content: "hello ";
}
75% {
    content: "hola ";
}
}
#wishH1::before{
  content: "hey there ";
}

#wishH1.active::before{
  animation: wish 2s linear infinite;
}

js

$('#giftButton').click(function(){
$('#wishH1').addClass('active')
$("#gift").fadeOut(1500);
setTimeout(function() {
  $("#gift").fadeIn(1500);
    $('#wishH1').removeClass('active')
}, 20000);
});

Answer 3

HTML

<h1><span id="animate_text"></span> NAME!</h1>
<button type="button" id="giftButton">
      <img id="giftImg" src="gift.png">
    </button>

JQUERY CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

JS

  let interval;
  let i = 0;
  let values = ['Hi', 'Hello', 'Hola']

  $('#giftButton').on("click", function () {
    interval = setInterval(function () {
      if (i >= values.length) {
        i = 0;
      }
      $('#animate_text').text(values[i]);
      i++
    },
      2000);
  })

Answer 4

虽然不能通过 Javascript 直接设置伪元素的样式，但可以在实际元素上设置 CSS 变量，这将被伪元素拾取。

所以我们首先设置 --name: none 然后在 Javascript（或 jquery）中将 CSS 变量设置为希望，然后 animation 将启动。

 document.querySelector('button').addEventListener('click', function () { document.querySelector('#wishH1').style.setProperty('--name', 'wish'); });

 @keyframes wish{ 25%{ content: "hi "; } 50%{ content: "hello "; } 75% { content: "hola "; } } #wishH1 { --name: none; } #wishH1::before { content: "Hey there "; animation: var(--name) 20s linear infinite; }

 <div class="container-fluid center" id="mainPage"> <div id="heading" class="row"> <h1 id="wishH1">NAME.</h1> </div> </div> <div class="container-fluid center" id="gift"> <button type="button" id="giftButton"> <img id="giftImg" src="gift.png"> </button> </div>