mirror of https://github.com/metafizzy/isotope
Filter & sort magical layouts
http://isotope.metafizzy.co
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.0 KiB
78 lines
2.0 KiB
14 years ago
|
---
|
||
|
|
|
||
|
|
title: Animating
|
||
|
|
category: docs
|
||
|
|
layout: doc
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
Isotope was developed to take advantage of the best browser features available.
|
||
|
|
|
||
|
|
|
||
|
|
## animationEngine
|
||
|
|
|
||
|
|
You can control how Isotope handles animation with the `animationEngine` option. This option has three values which control which jQuery method `.css()` or `.animate()` is used to apply styles.
|
||
|
|
|
||
|
|
+ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.
|
||
|
|
+ `'css'`: Isotope uses `.css()`
|
||
|
|
+ `'jquery'`: Isotope uses `.animate()`
|
||
|
|
|
||
|
|
## CSS transitions
|
||
|
|
|
||
|
|
To enable animation with CSS transitions, you'll need the following code in your CSS:
|
||
|
|
|
||
|
|
{% highlight css %}
|
||
|
|
|
||
|
|
.isotope,
|
||
|
|
.isotope .isotope-item {
|
||
|
|
-webkit-transition-duration: 0.8s;
|
||
|
|
-moz-transition-duration: 0.8s;
|
||
|
|
transition-duration: 0.8s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.isotope {
|
||
|
|
-webkit-transition-property: height, width;
|
||
|
|
-moz-transition-property: height, width;
|
||
|
|
transition-property: height, width;
|
||
|
|
}
|
||
|
|
|
||
|
|
.isotope .isotope-item {
|
||
|
|
-webkit-transition-property: -webkit-transform, opacity;
|
||
|
|
-moz-transition-property: -moz-transform, opacity;
|
||
|
|
transition-property: transform, opacity;
|
||
|
|
}
|
||
|
|
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
## Variations
|
||
|
|
|
||
|
|
With these two options you can finely control how animation is handled across browsers.
|
||
|
|
|
||
|
|
### Best available (recommended)
|
||
|
|
|
||
|
|
Browsers that support CSS transitions will use them. Other browsers will fall back to using jQuery animation.
|
||
|
|
|
||
|
|
+ **Add** CSS transition declarations
|
||
|
|
|
||
|
|
### Always use jQuery
|
||
|
|
|
||
|
|
All browsers will use jQuery animation, regardless of their CSS transition support.
|
||
|
|
|
||
|
|
+ `animationEngine : 'jquery'`
|
||
|
|
+ **No** CSS transition declarations
|
||
|
|
|
||
|
|
Never set `animationEngine : 'jquery'` AND add CSS transition declarations. This will cause double-animation in browser that support CSS transitions — which is a bad thing.
|
||
|
|
|
||
|
|
### Only CSS transitions
|
||
|
|
|
||
|
|
+ `animationEngine: 'css'`
|
||
|
|
+ **Add** CSS transition declarations
|
||
|
|
|
||
|
|
### None
|
||
|
|
|
||
|
|
Animation is not enabled in any browser
|
||
|
|
|
||
|
|
+ `animationEngine : 'css'`
|
||
|
|
+ **No** CSS transition declarations
|
||
|
|
|