Lance Vo lancevo

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:

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.
Use display:none in animation doesn't work, so putting in the last keyframe doesn't do anything.
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,

	function isNearBottom(element, marginPx){
	marginPx = marginPx \|\| 100;
	var elementOffsetTop = $(element).offset().top,
	nearBottomMargin = $(window).scrollTop() + $(window).height() - elementOffsetTop;
	return Math.abs(nearBottomMargin) <= marginPx;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style>

	div { width:150px;border:10px solid #ccc;
	display:inline-block;

	// social share
	$(".social-share").on('click','a', function(e){
	var url = $(this).attr('href');

	if (!url.match(/^mailto/)) {
	e.preventDefault();
	window.open(url,"SocialShare","location=no,menu=no,toolbar=no");
	}

	});

	//+ Jonas Raoni Soares Silva
	//@ http://jsfromhell.com/classes/bignumber [rev. #4]

	BigNumber = function(n, p, r){
	var o = this, i;
	if(n instanceof BigNumber){
	for(i in {precision: 0, roundType: 0, _s: 0, _f: 0}) o[i] = n[i];
	o._d = n._d.slice();
	return;
	}

	<div id="slides" class="">
	<div id="slide1" class="slide">
	<button class="menu-btn">Close</button>
	<ol>
	<li> Item </li>
	<li> Item </li>
	<li> Item </li>
	<li> Item </li>
	<li> Item </li>
	<li> Item </li>

	<div id="slides">
	<nav class="slide">

	<ol>
	<li> Item </li>
	<li> Item </li>
	<li> Item </li>
	<li> Item </li>
	<li> Item </li>
	<li> Item </li>

	<!doctype html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0">
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<style>
	html, body {
	height: 100%;
	}