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 - 重置動畫

回答

相關問題