CSS

Question

我对使用 css 创建的动画有疑问。一切正常，我只需要完成这个并设置输入类型以重置动画。

这是我的 css 应该重置动画：

$('button').on('click', function(){
var heading = $('h1').clone().removeClass();
$('h1').remove();
$('header').append(heading);
$('h1').addClass('fadein_element');

});

CSS动画

@keyframes fadein {
0%   { opacity: 0; }
100% { opacity: 1; }
enter code here

.fadein{-webkit-animation: fadein 3s ease-in ;
            -moz-animation: fadein 3s ease-in ;
             animation: fadein 3s ease-in ;

这是我对该部分的基本 html：

<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
<a href="#st-panel-1">WebGear</a>

这是编辑后的：

input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
<a href="#st-panel-1"><h1 class="fadein_element"><button class="fadein_element">WebGear</button></h1></a>

我迷路了，没有任何东西可以重置动画。除此之外，它还有效 fine.To 总结一下，你们有什么想法让这个工作正常吗？最好使用默认 html 代码...

编辑：发布我正在努力工作的最少代码

</head>
<body>
<div class="st-container">

<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
<a href="#st-panel-1">Something</a>

<input type="radio" name="radio-set" id="st-control-2"/>
<a href="#st-panel-2">Happiness</a>

<input type="radio" name="radio-set" id="st-control-3"/>
<a href="#st-panel-3">Tranquillity</a>

<input type="radio" name="radio-set" id="st-control-4"/>
<a href="#st-panel-4">Positivity</a>

<input type="radio"  name="radio-set" id="st-control-5"/>
<a href="#st-panel-5"> WebGear</a>

<div class="st-scroll">

    <section class="st-panel" id="st-panel-5">
        <div class="st-deco" data-icon="H"></div>
<div id="section1"> 
<div id="menu"> <img id="menuitem" src="Images/Menuitem.png"/>
<div id="hlava">
<div id="flashContent">
---Here goes the content---
There are just closing tags

和CSS

@keyframes fadein {
0%   { opacity: 0; }
100% { opacity: 1; }
}
.fadein{-webkit-animation: fadein 3s ease-in ;
            -moz-animation: fadein 3s ease-in ;
             animation: fadein 3s ease-in ;

单击 "radio button" 后，我希望我的（在本例中为 st-panel-5）重置动画。这 5 个按钮中的任何一个都可以做到这一点，所以我相信我可以将其应用于 class st-panel。

Answer 1

"Here is my css that should reset animation:" - 实际上是 Javascript - jQuery，但也许我理解错了。

执行动画后使用此代码：
element.offsetWidth = element.offsetWidth;
但我认为它是纯 Javascript（没有 jQuery）所以在您的示例中它将是：
document.getElementsByTagName("h1")[0].offsetWidth = document.getElementsByTagName("h1")[0].offsetWidth

您可以找到更多信息here。

Answer 2

为了解决这个问题，您将除了选中的无线电输入的目标 st-panel 之外的所有设置都设置为 display: none; opacity: 0，然后将 animation: fadein ...; 设置为选中的无线电输入的目标 st-panel-nn id。

比 单击前 2 个无线电输入以检查行为

#st-control-1:checked ~ .st-scroll .st-panel:not(#st-panel-1),
#st-control-2:checked ~ .st-scroll .st-panel:not(#st-panel-2) {
  opacity: 0;
  display: none;
}

#st-control-1:checked ~ .st-scroll #st-panel-1,
#st-control-2:checked ~ .st-scroll #st-panel-2 {
  animation: fadein 1.5s ease-in;
}

@keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

<div class="st-container">

  <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
  <a href="#st-panel-1">Something</a>

  <input type="radio" name="radio-set" id="st-control-2"/>
  <a href="#st-panel-2">Happiness</a>

  <input type="radio" name="radio-set" id="st-control-3"/>
  <a href="#st-panel-3">Tranquillity</a>

  <input type="radio" name="radio-set" id="st-control-4"/>
  <a href="#st-panel-4">Positivity</a>

  <input type="radio"  name="radio-set" id="st-control-5"/>
  <a href="#st-panel-5"> WebGear</a>

  <div class="st-scroll">

    <section class="st-panel" id="st-panel-1">
      <div class="st-deco" data-icon="H"></div>
      <div id="section1"> 
        <div id="menu"> <img id="menuitem" src="Images/Menuitem.png"/>
          <div id="hlava">
            <div id="flashContent">
            Some content 1
            </div>
          </div>
        </div>          
      </div>
    </section>

    <section class="st-panel" id="st-panel-2">
      <div class="st-deco" data-icon="H"></div>
      <div id="section1"> 
        <div id="menu"> <img id="menuitem" src="Images/Menuitem.png"/>
          <div id="hlava">
            <div id="flashContent">
            Some content 2
            </div>
          </div>
        </div>          
      </div>
    </section>

  </div>
</div>

CSS - 重置动画

CSS - reset animation

javascript

jquery

animation

reset