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>

我迷失了它并没有重置动画。除此之外它工作正常。总结一下，你们有任何想法如何让这个工作？最好使用默认的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-panel。

Answer 1

＆＃34;这是我的CSS应该重置动画：＆＃34; - 它实际上是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 ...;设置为已检查的广播输入目标{ {1}} id。

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

＆＃13;

st-panel-nn

＆＃13;

#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; }
}

＆＃13;

CSS - 重置动画

2 个答案: