Opacity Animation for updating list

index.html

<button>Toggle</button>
<ol id="list">
  <li>1. U.S. retail sales weak; jobless claims jump</li><li>2. Wall Street rises after Ukraine deal, Swedish stimulus</li><li>3. ECB raises pressure on Greece as Tsipras meets EU peers</li><li>4. Oil bounces back above $56 as dollar weakens, majors cut investments</li><li>5. Time Inc forecasts further declines in advertising revenue</li><li>6. GM confirms Bolt compact electric car to be made at Michigan plant</li><li>7. Online travel agency Expedia to buy rival Orbitz for $1.38 billion</li><li>8. Apple's inability to monitor standards lets Pegatron pay low wages, NGO says</li><li>9. S&amp;P owner McGraw Hill reports loss on $1.5 billion legal charge</li><li>10. UK lawmakers to call up HSBC, tax office over Swiss tax allegations</li>
</ol>

Opacity-Animation-for-updating-list.markdown

Opacity Animation for updating list

Smooth transition when updating the list, all hidden items don't display as blank in layout. It animates at the parent level (ul/ol) rather than the individual level (li), to overcome several challenges:

1. Use height:0 transition will hide the item smoothly, but it presents several issues: a) to show the item, you must provide exact pixel for height, and each item height is different so it's not possible with css alone. b) another way to get around this is when before showing the item, remove the previous hide class, it will reset the height to original, however it jerks the layout, because the height is restored before the transition.
2. Use display:none in animation doesn't work, so putting in the last keyframe doesn't do anything.
3. Use scale, transition, position:absolute to remove from the layout, it has the same issue as 1b. Also with position:absolute, when animating before opacity:0, the contents overlap each other, because position:absolute removes itself the flow of elements on the page.

So rather to hide or show individual item, I hide the whole list. While it's hidden,javascript hides and shows individual items, animates the whole list. With keyframes animation, I can control the time, and allow javascript to finish its work before showing the list. So in keyframes, from 0-5%, opacity is 0, this provides enough time for javascript, if not I increase it to 10%.

demo

script.js

var liObjs = $('li');


function showhide(index){
  var elm = $(liObjs[index]);
  if (elm.is(':visible')) {
    elm.hide()
  } else {
    elm.show();
  }
}

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };

 

var indices = [];
for (var i=0,max =liObjs.length; i<max; i++) {
  indices.push(i);
}
function randomness() {
   var lists = [],
      pickMax = 5,
      randomIndex = 0,
      value = 0;
  for (var i = 0; i < pickMax; i++) {
    if (lists.length < 2) {
      lists = indices.slice(0)
    }
    randomIndex = Math.floor( Math.random()*lists.length);
    value = (lists.splice(randomIndex, 1))[0];
    showhide(value);
  }
}


function pickrandom(){
  $('#list').removeClass('change');
    setTimeout(function(){
      $('#list').addClass('change');
      randomness();
    },10);
}


var intRef;

  var toggle = debounce(function(){
    if (!intRef) {
      intRef = setInterval(pickrandom, 1200);
    } else {
      intRef= clearInterval(intRef);
    }    
  }, 250);

				

  $('button').click(toggle);

style.css

@-webkit-keyframes changeAni {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    10% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}
@keyframes changeAni {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    10% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}
.change {
    -webkit-animation: changeAni 1s forwards;
    animation: changeAni 1s forwards;
}