为什么我的元素在动画完成后不再隐藏?
Why is my element no longer hidden after the animation is complete?
我想要完成的是一个方框网格,其中每个方框在单击时都会动画化,然后显示覆盖整个网格的相应详细视图。
详细视图包括 link 到 return 回到网格视图。
在我的完整实现中,将有从详细视图到详细视图的轮播式导航,并带有动画。正因为如此,我想用一个简单的覆盖隐藏盒子的网格,一旦用户 return 进入网格视图,它应该恢复隐藏。
问题是 JQuery hide()
调用似乎在动画完成时被删除...有时,但并非总是如此。
我创建了 a simple JSFiddle 来展示我试图避免的行为。单击其中一个框时,下一个 .expanded-card
元素会正确显示。当您单击 "back to overview" 时,.expanded-card
元素会适当淡出,并且隐藏 .grid-background
叠加层。
但是一旦 zoomOut
动画完成,.grid-background
就会再次可见。为什么?
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>
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();
});
使用这个:
expandedCard.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
expandedCard.removeClass('zoomIn');
$('.grid-background').show();
});
你有 .on
而不是 .one
,所以后面的 "zoomOut" 动画会再次触发它,所以它会显示 .grid-background
.
也许这只是一个打字错误,因为您在点击 .expanded-card
的代码中是正确的。
另一种可能性,而不是每次都绑定一个处理程序,是将处理程序委托给 .zoomIn
和 .zoomOut
类.
$(".container").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", ".zoomIn", function() {
$(this).removeClass("zoomIn");
$(".grid-background").show();
});
$(".container").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", ".zoomOut", function() {
$(this).removeClass("zoomOut").hide();
});
我想要完成的是一个方框网格,其中每个方框在单击时都会动画化,然后显示覆盖整个网格的相应详细视图。
详细视图包括 link 到 return 回到网格视图。
在我的完整实现中,将有从详细视图到详细视图的轮播式导航,并带有动画。正因为如此,我想用一个简单的覆盖隐藏盒子的网格,一旦用户 return 进入网格视图,它应该恢复隐藏。
问题是 JQuery hide()
调用似乎在动画完成时被删除...有时,但并非总是如此。
我创建了 a simple JSFiddle 来展示我试图避免的行为。单击其中一个框时,下一个 .expanded-card
元素会正确显示。当您单击 "back to overview" 时,.expanded-card
元素会适当淡出,并且隐藏 .grid-background
叠加层。
但是一旦 zoomOut
动画完成,.grid-background
就会再次可见。为什么?
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>
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();
});
使用这个:
expandedCard.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
expandedCard.removeClass('zoomIn');
$('.grid-background').show();
});
你有 .on
而不是 .one
,所以后面的 "zoomOut" 动画会再次触发它,所以它会显示 .grid-background
.
也许这只是一个打字错误,因为您在点击 .expanded-card
的代码中是正确的。
另一种可能性,而不是每次都绑定一个处理程序,是将处理程序委托给 .zoomIn
和 .zoomOut
类.
$(".container").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", ".zoomIn", function() {
$(this).removeClass("zoomIn");
$(".grid-background").show();
});
$(".container").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", ".zoomOut", function() {
$(this).removeClass("zoomOut").hide();
});