0

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!

hayley
  • 384
  • 5
  • 17
  • 1
    don't use display:none with transitions, it won't work. – dandavis Apr 06 '20 at 17:01
  • @dandavis But I have different heights of contents, and I cannot use opacity or visibility property cause when they've hidden they still take up spaces. Can you give me some guides? – hayley Apr 07 '20 at 01:14
  • you have to make them not take up space when "hidden". you can use something like zoom:0.01; or something like abspos+left: -500vw;height:1px;... – dandavis Apr 07 '20 at 04:38

0 Answers0