Appending items - how to fade in from bottom?

[metafizzy]

Appending items - how to fade in from bottom?

[desandro]

Why yes it is. Take a look at http://jsfiddle.net/desandro/MAjzR/4/

(If nothing happens when you click Add Items button, try going to http://isotope.metafizzy.co/jquery.isotope.min.js and doing a hard refresh)

Let's break down what's going on here..

var isotopeData = $container.data('isotope'),

You can get an instance's options and properties using .data('isotope')

applyStyleFnName = isotopeData.applyStyleFnName,

applyStyleFnName is either css or animate depending on which options were set, or if the browser supports CSS transitions.

newStyle = $container.isotope( 'getPositionStyles', $container.width(), $container.height() );

$.extend( newStyle, isotopeData.options.hiddenStyle );

// apply style
$newItems.css( newStyle );

newStyle is going to be the positioning, opacity, and scale style for the new items. Here I set the position to the bottom right of the container, using the undocumented getPositionStyles method. This method returns position styles (top/left, or translate) depending on Isotope options and CSS transform support. I get the zero opacity and tiny scale from the Isotope's instance options. That style gets immediately applied to the new items.

$container.append( $newItems ).isotope( 'appended', $newItems );
// fade new items to full opacity
$newItems[ applyStyleFnName ]( isotopeData.options.visibleStyle, aniOpts);

After the new items get appended, we expose the hidden new elements.

[rszczypka]

Sorry but the jsfiddle example does nothing and hard refereshing http://isotope.metafizzy.co/jquery.isotope.min.js doesn't help. Any ideas?

[desandro]

This feature is now built into Isotope. See http://isotope.metafizzy.co/demos/adding-items.html