CSS - 重置动画

我有使用css创建的动画的问题。一切工作正常，我只需要完成此设置和设置输入类型来重置动画。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>

我得到了它，并没有丢失重置动画。除此之外，它工作正常。总结起来，你们有什么想法如何得到这个工作？最好使用默认的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 ;

当我点击“单选按钮“我希望我的（在这种情况下是st-panel-5）重置动画。这5个按钮中的任何一个都可以做到这一点，所以我相信我可以将它应用到st级的面板上。

来源

2016-03-27 Filip5

后最小工作代码片段重现问题 – LGSon

为了解决这个问题，你设置所有，但检查无线输入的针对性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>

来源

2016-03-28 11:34:00 LGSon

这就是我正在寻找的 – Filip5

@ Filip5听起来很完美...我会稍微更新我的答案文本，并期待你的接受。 – LGSon

你先生，真棒。我正在设计这些按钮，到目前为止它正在工作。你救了我很多麻烦 – Filip5

“这是我的CSS应该重置动画：” - 它实际上是Javascript - jQuery，但也许我误解了。

后的动画被执行使用此代码：
element.offsetWidth = element.offsetWidth;
，但我认为这是纯JavaScript（不包括jQuery的），所以在你的例子那就是：
document.getElementsByTagName("h1")[0].offsetWidth = document.getElementsByTagName("h1")[0].offsetWidth

你可以找到更多信息here。

来源

2016-03-27 23:13:21 dunnohowishouldnamemyself

@dunnohpwishouldnamemyself 我已经试过你的解决方案以及您提供的链接上的内容，但对我无效。我可能会做错什么... – Filip5

我在我的回答中描述的那个绝对适合我！我希望你能很快得到你的代码 – dunnohowishouldnamemyself

CSS - 重置动画

回答

相关问题