我正在开发一个简单的页面。它将有一个学科列表,当它们被选中时,信息将显示在下面。
笔here显示我正在寻找的功能,但是动画在最初加载时起作用,但是对于所有其他部分,它们第一次显示时没有动画。之后他们用动画显示没问题。
@keyframes fadeIn {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#content1, #content2, #content3, #content4, #content5 {
-webkit-animation: fadeIn 0.7s ease-in-out;
-moz-animation: fadeIn 0.7s ease-in-out;
-o-animation: fadeIn 0.7s ease-in-out;
animation: fadeIn 0.7s ease-in-out;
}
input[type="radio"] {
display: none;
}
#tab1[type="radio"]:not(:checked) ~ #content1,
#tab2[type="radio"]:not(:checked) ~ #content2,
#tab3[type="radio"]:not(:checked) ~ #content3,
#tab4[type="radio"]:not(:checked) ~ #content4,
#tab5[type="radio"]:not(:checked) ~ #content5 {
display: none;
}
#tab1[type="radio"]:checked ~ #content1,
#tab2[type="radio"]:checked ~ #content2,
#tab3[type="radio"]:checked ~ #content3,
#tab4[type="radio"]:checked ~ #content4,
#tab5[type="radio"]:checked ~ #content5 {
display: block;
}
答案 0 :(得分:0)
这是因为在您的元素不可见时,已经触发了初始动画
将他们的display
设置为block
将不会重置他们的animation
。但是,将其设置为none
。
因此,简单的解决方法是将元素animation
属性设置在您设置display: block;
的相同位置。
#tab1[type="radio"]:checked~#content1,
#tab2[type="radio"]:checked~#content2,
#tab3[type="radio"]:checked~#content3,
#tab4[type="radio"]:checked~#content4,
#tab5[type="radio"]:checked~#content5 {
display: block;
/* set the animation prop here */
animation: fadeIn 0.7s ease-in-out;
}
@keyframes fadeIn {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
input[type="radio"] {
display: none;
}
#tab1[type="radio"]:not(:checked)+label,
#tab2[type="radio"]:not(:checked)+label,
#tab3[type="radio"]:not(:checked)+label,
#tab4[type="radio"]:not(:checked)+label,
#tab5[type="radio"]:not(:checked)+label {
color: #888;
}
#tab1[type="radio"]:checked+label,
#tab2[type="radio"]:checked+label,
#tab3[type="radio"]:checked+label,
#tab4[type="radio"]:checked+label,
#tab5[type="radio"]:checked+label {
color: #000;
}
#tab1[type="radio"]:not(:checked)~#content1,
#tab2[type="radio"]:not(:checked)~#content2,
#tab3[type="radio"]:not(:checked)~#content3,
#tab4[type="radio"]:not(:checked)~#content4,
#tab5[type="radio"]:not(:checked)~#content5 {
display: none;
}

<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1" class="pure-button"><span>section 1</span></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2" class="pure-button"><span>section 2</span></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3" class="pure-button"><span>section 3</span></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4" class="pure-button"><span>section 4</span></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5" class="pure-button"><span>section 5</span></label>
<div id="content1">
<h1>content 1</h1>
</div>
<div id="content2">
<h1>content 2</h1>
</div>
<div id="content3">
<h1>content 3</h1>
</div>
<div id="content4">
<h1>content 4</h1>
</div>
<div id="content5">
<h1>content 5</h1>
</div>
&#13;