StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS3 - Adding dynamic content triggers animation
primarykey
Id
18673392
data
AcceptedAnswerId
18673820
AnswerCount
2
ClosedDate
CommentCount
7
CommunityOwnedDate
CreationDate
2013-09-07T12:36:13.637
FavoriteCount
0
LastActivityDate
2013-09-07T13:30:54.990
LastEditDate
2013-09-07T12:58:30.417
LastEditorUserId
1887854
OwnerUserId
1887854
ParentId
0
PostTypeId
1
Score
1
ViewCount
230
LastEditorDisplayName
text
Body
<p>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 <code>ul</code> and it animates one time (expected behaviour) whereas, the non-animable elements are added on JS Event.</p> <p>HTML:</p> <pre><code><ul> <li class="m"><div class="animable"></div></li> <li class="m"><div class="animable animateNow"></div></li> </ul> </code></pre> <p>When JS event occurs, a list element is added dynamically.</p> <pre><code><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> </code></pre> <p>and the moment it is appended , the animable div triggers its animation for one more time and so on for each added element.</p> <p>Is this a bug ? How can I prevent it? I am using pure JS.</p> <p>CSS:</p> <pre><code>.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; } </code></pre> <p><img src="https://i.stack.imgur.com/iWAoP.jpg" alt="The Big Image"></p>
Tags
<javascript><css><css3><animation>
Title
CSS3 - Adding dynamic content triggers animation
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USMuhammad Talha Akbar
UserOwnerUserId
1. USMuhammad Talha Akbar
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POCSS3 - Adding dynamic content triggers animation
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.