Beofett Beofett - 7 months ago 6
Javascript Question

Why is my element no longer hidden after the animation is complete?

What I'm trying to accomplish is a grid of boxes, where each box animates when clickde, then shows a corresponding detail view that covers the entire grid.

The detail view includes a link to return back to the grid view.

In my full implementation, there will be carousel-style navigation from detail view to detail view, with animations. Because of this, I want to hide the grid of boxes with a simple overlay, which should revert to hidden once the user returns to the grid view.

The problem is that the JQuery

hide()
call seems to be removed when the animation completes... sometimes, but not always.

I've created a simple JSFiddle showing the behavior I'm trying to avoid. When you click on one of the boxes, the next
.expanded-card
element displays properly. When you click on "back to overview", the
.expanded-card
element fades out appropriately, and the
.grid-background
overlay is hidden.

But as soon as the
zoomOut
animation completes,
.grid-background
becomes visible again. Why?

The HTML:

<div class="container">
<div class="row grid-3x3-container">
<div class="col-xs-10 col-xs-offset-1 text-center">
<div class="container-fluid grid-3x3">
<div class="row">
<div class="col-xs-4 grid-item">
<div class="flip-box animated">
<h3>Title 1</h3>
</div>
</div>
<div class="expanded-card animated col-xs-12">
<div class="card-header">
<span class="card-nav-back"> back to overview</span>
</div>
<div class="card-body">
<p>
Text goes here!
</p>
</div>
</div>
<div class="col-xs-4 grid-item">
<div class="flip-box animated">
<h3>Title 2</h3>
</div>
</div>
<div class="expanded-card animated col-xs-10 col-xs-offset-1">
<div class="card-header ">
<span class="card-nav-back"> back to overview</span>
</div>
<div class="card-body">
<p>
Text goes here!
</p>
</div>
</div>
<div class="col-xs-4 grid-item">
<div class="flip-box animated">
<h3>Title 3</h3>
</div>
</div>
<div class="expanded-card animated col-xs-10 col-xs-offset-1">
<div class="card-header ">
<span class="card-nav-back"> back to overview</span>
</div>
<div class="card-body">
<p>
Text goes here!
</p>
</div>
</div>
<div class="col-xs-12 grid-background">

</div>
</div>
</div>
</div>
</div>
</div>


The JavaScript:

$('.flip-box').on("click", function () {
var currentCard = $(this).parent();
currentCard.addClass('current-selection');
var expandedCard = currentCard.next('.expanded-card');
currentCard.addClass('flipOutX');
currentCard.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
expandedCard.show();
expandedCard.addClass('zoomIn');
currentCard.find('h3').show();
expandedCard.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
expandedCard.removeClass('zoomIn');
$('.grid-background').show();
});
});
});
$('.expanded-card').on("click", '.card-header>.card-nav-back', function () {
var currentGridItem = $('.current-selection');
var currentCard = currentGridItem.next('.expanded-card');
currentGridItem.removeClass('current-selection');
currentCard.addClass('zoomOut');
currentCard.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
currentCard.removeClass('zoomOut');
currentCard.hide();
});
$('.grid-background').hide();
});

Answer

Use this:

        expandedCard.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
          expandedCard.removeClass('zoomIn');
          $('.grid-background').show();
        });

corrected fiddle

You had .on instead of .one, so the later "zoomOut" animation would trigger this again, so it would show .grid-background.

Maybe it was just a typo, because you got it right in code for clicking on .expanded-card.

Comments