Reputation: 1327

Performance issues with transitions

I have code that works here, but I am getting some performance issues and I would like to ask more experienced developers if there is something I could be doing to improve it. My code is fairly simple. What I want to achieve is that when you click on an image, the image slides down and another one slides in it's place. My first approach was this:

html

<div id="myDiv">

    <div class="page page-1"><img src="img1.jpg" width="100%"></div>
    <div class="page page-2"><img src="img2.jpg" width="100%"></div>

</div>

css

.page-2 {display: none;}

.page-moveFromTop {
    -webkit-animation: moveFromTop 2s ease both;
    animation: moveFromTop 2s ease both;
}

.page-moveToBottom {
    -webkit-animation: moveToBottom 2s ease both;
    animation: moveToBottom 2s ease both;
}


@keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@keyframes moveToBottom {
    from { }
    to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

then on my js:

$(document).ready( function () {


   $('#myButton').click(function(){

      $('.page-1').addClass('page-moveToBottom');

      $('.page-2').css('display', 'block');

      $('.page-2').addClass('page-moveFromTop');

   });
});

So this is working, but i am getting issues in which sometimes there is a quick flick of the second image as I press the button and before the transition happens, and sometimes the transition is bypassed altogether. This only happens about 20% of the time, but it's still not good enough. I thought maybe the problem was the fact that the display was set to "none" to then be applied by the javascript which I've read is sometimes not the best option so I've tried a different approach by removing the second image from the html altogether:

<div id="myDiv">

    <div class="page page-1"><img src="img1.jpg" width="100%"></div>

</div>

and the

.page-2 {display: none;}

from my css and modifying the javascript using the append() function instead:

$(document).ready( function () {

   $('#myButton').click(function(){

      $('.page-1').addClass('page-moveToBottom');

      $('<div class="page page-2"><img class="image" src="ecran2.jpg" width="100%"></div>').appendTo("#pt-main");

      $('.page-2').addClass('page-moveFromTop');
      });
 });

Again, this also works, but I am getting the inconsistency issues I mentioned before. So what I would like to know is if there is a best practice way to do this that is more reliable when it comes to performance. Thanks for your time. P

Upvotes: 1

Answers (4)

zer00ne

Reputation: 43870

jQuery has a ton of methods which do the same thing to varying degrees. Of the plethora methods this Snippet uses the slideDown() method along with add/removeClass() methods, and classes .om and .off to provide the transitions.

BTW, I started backwards by accident, but I'm too tired to change it now, going forward I'll leave that to you -_- zzZZZZ

SNIPPET

$(function() {
  $('#xBtn1').on('click', slideNext);

  function slideNext() {
    $('.page.on').slideDown('slow', function() {
      var next = $(this).prev('.page');
      $('.page.on').removeClass('on').addClass('off');
      next.slideDown('slow').removeClass('off').addClass('on');
    });
  }
});

.on {
  display: block;
  opacity: 1;
  transition: opacity 1.5s ease-in;
}
.off {
  display: none;
  opacity: 0;
  transition: opacity 1.5s ease-out;
}
#xList1 {
  list-style: none;
  overflow-y: hidden;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='xBtn1'>NEXT</button>

<ul id="xList1">
  <li class="page off" id='xPage1'>
    <img src='http://placehold.it/50x50/000/fff?text=1'>
  </li>
  <li class="page off" id='xPage2'>
    <img src='http://placehold.it/50x50/00f/eee?text=2'>
  </li>
  <li class="page off" id='xPage3'>
    <img src='http://placehold.it/50x50/0e0/111?text=3'>
  </li>
  <li class="page off" id='xPage4'>
    <img src='http://placehold.it/50x50/f00/fff?text=4'>
  </li>
  <li class="page off" id='xPage5'>
    <img src='http://placehold.it/50x50/fc0/000?text=5'>
  </li>
  <li class="page on" id='xPage6'>
    <img src='http://placehold.it/50x50/930/fc0?text=6'>
  </li>
</ul>

Upvotes: 0