Version 1.1.3
Easily apply CSS transitions to elements with JavaScript and jQuery. Never worry about animating the display property again.
Swish works much like jQuery's show and hide methods, which transition the element
while toggling its display property. Swish does this too, except it transitions using CSS instead
of JavaScript.
The first argument is the class name of the CSS transition. Swish comes with four transitions, included in
the optional css-swish-transitions.css:
swish-fadeswish-zoomswish-slideswish-3d-rotate
The second argument is the duration of the transition in milliseconds. If unsupplied, Swish will use the duration
set in your stylesheet. Then just call swish to toggle the transition.
var elem = document.querySelector('#selector');
elem.swish('swish-fade', 1000);$('#selector').swish('swish-fade', 1000);The easiest way to use Swish is to add data attributes to your markup. Set the transition class using
data‑swish‑transition and the duration with data‑swish‑duration. The duration attribute
is optional and will default to the rules in your stylesheet.
<div
id="selector"
data-swish-transition="swish-fade"
data-swish-duration="500"
></div>var elem = document.querySelector('#selector');
elem.swish();$('#selector').swish();You can also transition in a specific direction using swishIn and swishOut. These
methods take the same arguments as swish.
elem.swishIn(transition, duration);
elem.swishOut(transition, duration);$('#selector').swishIn(transition, duration);
$('#selector').swishOut(transition, duration);If the default state of your element is hidden, you will need to add display: none to that element.
This lets Swish know that the element isn't visible.
Swish wouldn't be very useful if you couldn't supply your own transitions, and it lets you do just that! You just need a main transition class and an in and out state. The in state is applied when the element is visible, and the out state when hidden.
.example-transition {
transition: all 1s ease-in-out;
}
.example-transition.out {
background: blue;
}
.example-transition.in {
background: red;
}var elem = document.querySelector('#selector');
elem.swish('example-transition');$('#selector').swish('example-transition');Swish returns the duration of the animation in ms when called. This can be useful if you need to queue animations. Because jQuery methods are all monads, the jQuery plugin does not have this behaviour by default and requires additional parameters to be supplied.
var duration = elem.swish();
// duration = 1000, the default as specified in CSS
var duration = elem.swish('example-transition');
// duration = 1000, the default as specified in CSS
var duration = elem.swish('example-transition', 5000);
// duration = 5000, the value provided to the methodvar duration = $('#selector').swish(true);
// duration = 1000, the default as specified in CSS
var duration = $('#selector').swish('example-transition', true);
// duration = 1000, the default as specified in CSS
var duration = $('#selector').swish('example-transition', 5000, true);
// duration = 5000, the value provided to the methodBy default Swish uses the classes in and out to show and hide elements. If this
doesn't work with your project, you can configure Swish to use other classes.
Swish({
hiddenClass: 'out',
visibleClass: 'in'
});$.Swish({
hiddenClass: 'out',
visibleClass: 'in'
});Swish is also available as a Bower package. Just type bower install swish-js.
I made this library out of the frustrations of dealing with tedious transition bugs involving the display
property. Developers shouldn't have to do silly things like nesting setTimeout calls just to get
animations to work properly.
If you'd like to learn more about the problems with animating the display property, Louis Lazaris has written a very informative article on the topic.
If you use Swish, I'd love to hear about it! Let me know if you make something cool and I'll give you a shout out on this page!
You can view the source to this project on GitHub.
If you like this project, why not check out my other work on my site and follow me on twitter.
SwishJS is licensed under the Apache 2 license.
© 2014 Jordan Ranson