I have animation defined in CSS3 for specific class which runs only one time when that class is added to a element. The problem is when I add dynamic content to their parent the animation runs for one more time. Everytime, content is added the animation triggers. A list element which is to be animated is automatically added to ul
and it animates one time (expected behaviour) whereas, the non-animable elements are added on JS Event.
HTML:
<ul>
<li class="m"><div class="animable"></div></li>
<li class="m"><div class="animable animateNow"></div></li>
</ul>
When JS event occurs, a list element is added dynamically.
<ul>
<li class="m"><div class="animable"></div></li>
<li class="m"><div class="animable animateNow"></div></li>
<li class="m"><div class="animable"></div></li> // <- Sir! I am innocent. I am newly added by JS. IDK, what is happening :/
</ul>
and the moment it is appended , the animable div triggers its animation for one more time and so on for each added element.
Is this a bug ? How can I prevent it? I am using pure JS.
CSS:
.animable {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:#ecf7d2;
}
.animateNow {
opacity:0;
animation-duration: 2s;
animation-name: animTrans;
-webkit-animation-duration: 2s;
-webkit-animation-name: animTrans;
}
您可以使用我认为的preventdefault函数,但看不到js部分,也不能摆弄您很难建议共享JS部分的内容
On our discussion in the chat, you showed the code that adds the items:
var elem = document.getElementById("messages").getElementsByTagName("ul")[0];
elem.innerHTML += msg.data;
Your problem is that you're changing the innerHTML every time, which makes the entire content of the list to render again and again...
You should create a DOM element and use Node.appendChild( child ) instead.
var elem = document.getElementById("messages").getElementsByTagName("ul")[0];
var item = document.createElement('LI');
item.outerHTML = msg.data;
elem.appendChild(item)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.