Event firing when 3D Transform complete

[coolwebs]

Trying to find a way to fire an event via jQuery/JS when the card flip animation is complete, but not having much luck. I have tried the following code:

$("#card.flipped").one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) { alert('animation over baby') });

and some other variations of it, but nothing is happening. Peeked into your utils.js and I can't make anything happen either.

What I want to achieve is having a card flip including the button being part of it. Just want to hide the button for the duration of the animation and then make it reappear when animation is over. Obviously putting button on the 'front' and 'back' is not an option. Best to post my example https://rawgit.com/SLQ-web/Packery-Mockup-SLQ-Homepage/Wacky-draggabilly/html/whats-on-flickity.html - check out the "Question of the Day" section to see what I mean (have the complete Packery grid item flip).

Is there any way to achieve this with your 3D Transform & Packery Libraries?

[coolwebs]

Update: Decided to remove the button altogether and appended the toggleClassName function to the 'card' class. Click anywhere on the div and the whole thing flips. Still curious as to how to detect the end of css animation sequence though.

[desandro]

I recommend using two elements: one for the Packery grid item, and an inner for the card flip

<div class="grid">
  <div class="grid-item">
    <div class="grid-item-card">
      ...
    </div>
  </div>
  <div class="grid-item">
    <div class="grid-item-card">
      ...
    </div>
  </div>
  ...
</div>

[coolwebs]

Thanks. I set it up in a similar fashion but client still wants the behavior to happen on a link and not on the whole card itself (bummer). Issue is that if the link is part of the animated card - it fails to fire the toggle on the return trip.

Code I used is here:

     <div class="grid-item">
        <div class="grid-content" style="padding: 0; background:none">
               <div class="flip-container">
                <div id="card">
                    <div class="front">
                      <p>Some content info for the front of the card</p>
                      <p id="info"><img src="../img/info-icon-outline.svg" />Check your answer</p>
                    </div>
                   <div class="back">
                     <p>Something with the answer on the back</p>
                    <p id="info"><img src="../img/info-icon-outline.svg" />Flip it back</p>
                   </div>
               </div>
            </div>
         </div>

Then I changed the JS at the end of the card-flip JS file to:

document.getElementById('info').addEventListener( 'click', function(){
card.toggleClassName('flipped');
}, false);
};

So yeah, works awesome for the initial flip but the toggle to go back to original state does not fire. Have updated the rawGit link here https://rawgit.com/SLQ-web/Packery-Mockup-SLQ-Homepage/Wacky-draggabilly/html/whats-on-flickity.html

Think I might have to edit the JS so that it doesn't add a toggle action but instead it is two separate functions on two separate ID elements (once for add class 'flipped' and another for removing the class)

[coolwebs]

Yep, I took a bit further and added a unique ID for the back card <p class="resolveInfo"><img src="../img/info-icon-outline.svg" />Flip it back</p>

Updated the JS code:

document.getElementById('info').addEventListener( 'click', function(){
card.toggleClassName('flipped');
}, false);
};

document.getElementById('resolveInfo').addEventListener( 'click', function(){
$( "#card" ).removeClass( "flipped" );
});

It's a bit 'dirty' right now. Might look to remove toggle action now and just make it addClass as its not really a toggle anymore.