I'm trying to practice this article(https://www.impressivewebs.com/animate-display-block-none/) using jQuery. Cause I have to check the options which user selected, so I add some determine statements. Here is my code:
$('ul.h-calendar li').click(function() {
var tabIndex = $(this).data('tab');
// hide all
$('.h-calendar-paper').removeClass('h-page-visiable');
$('.h-calendar-paper').on('transitionend webkitTransitionEnd oTransitionEnd', function() {
$('.h-calendar-paper').removeClass('h-page-added');
})
// show the specific selected option
$calendarPapers = $('.h-calendar-paper');
$calendarPapers.each(function(i) {
var $this = $calendarPapers.eq(i);
if ($this.data('tab') === tabIndex) {
$this.addClass('h-page-added');
setTimeout(function() {
$this.addClass('h-page-visiable');
}, 200);
}
});
});
.h-calendar-paper {
position: absolute;
width: 100%;
display: none;
opacity: 0;
transition: all 0.5s linear;
}
.h-calendar-paper[data-date="6"] {
background: gray;
height: 110%;
}
.h-calendar-paper[data-date="7"] {
background: red;
height: 220%;
}
.h-page-added {
display: block;
}
.h-page-visiable {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="h-calendar-paper" data-month="4" data-date="7" data-tab="0">
text...
</div>
<div class="h-calendar-paper" data-month="4" data-date="6" data-tab="1">
text...
</div>
<ul class="h-calendar">
<li data-tab="0">
<div>
<span>6</span><br /><span>MON</span>
</div>
</li>
<!--
-->
<li data-tab="1">
<div>
<span>7</span><br /><span>TUE</span>
</div>
</li>
</ul>
The result shows that the transitioned event have conflict with the code below(in order to show the selected option contents) which made my .h-page-added
class cannot be added to the element. Can anyone tell me how to fix it or how to make my code logic better? (This is just my part of code, hope you guys will know what I'm trying to say.) Thanks!