want to do a tab in turn to mark the dynamic effect.
the HTML in the tab section is dynamically generated by JS
function changeListWrap(index) {
var info = obj[index].info;
var strList = "";
var delay = 0;
for (var _index in info){
delay += 2;
strList += "<div class=\"file\" style=\"animation-delay:" + (delay/10) + "s\">";
strList += "<div class=\"des-wrap\" onclick="">";
strList += "<p class=\"version\">" + info[_index].version + "";
strList += "<p class=\"title\">" + info[_index].name + "";
strList += "<p class=\"date\">" + info[_index].created_at + "";
strList += "</div>";
strList += "<a class=\"download\" href=\"" + info[_index].url + "\"></a>";
strList += "</div>";
}
$("-sharpadd-list").html(strList);
$(".file").addClass("action");
}the added action class is classified as special effects
.action {
animation: filedraw 1s;
}
@keyframes filedraw {
from {left: -200px; opacity: 0;}
to {left: 0; opacity: 100%;}
} but it"s awkward right now. Animation is effective, but it"s late. Tabs are the effect of appearing before running.
is currently like this
http://o9mrx3p1u.bkt.clouddn.
now change CSS
.file {
position: relative;
left: -200px; opacity: 0;
}
.action {
animation: filedraw 1s;
}
@keyframes filedraw {
//from {}
to {left: 0; opacity: 100%;}
}the result is that the tab is not displayed
_
remains the same. .file {
position: relative;
display: none;
.action {
display: block;
animation: filedraw 1s;
animation-fill-mode: forwards;
}
@keyframes filedraw {
from {left: -200px; opacity: 0;}
to {left: 0; opacity: 100%;}
}