Categories:

Playing IE transitions using JavaScript

With a transition defined on an element, playing the transition can be done using JavaScript. Lets say you have an image already set up that changes to another with a click of a link, by updating its "src" property:


Change image

<script type="text/javascript">

var dayimage=new Image()
var nightimage=new Image()
dayimage.src="day.jpg" //preload image
dayimage.src="night.jpg" //preload image

function changeimage(){
 var myimage=document.getElementById("vocation")
 myimage.src=(myimage.src.indexOf("day.jpg")!=-1)? "night.jpg" : "day.jpg" //alternate between two images to change to
}

</script>

<img id="vocation" src="day.jpg" /><br />
<a href="javascript:changeimage()">Change image</a>

So how do we go about adding a IE transition to the above, so it's played during the changing of the image? Lets take this step by step shall we?

The very first step is always to first define the desired transition on the image, as discussed on the previous page. Then comes the actual playing part. All IE Transitions support the below three method:

Method Description
apply() Captures the initial display of the content in preparation for the transition to be played (using the play() method). No visible changes to the content made at this point.
play([duration]) Plays the transition in question to transition to the element's new content state. Supports an optional duration parameter that, if set, overrides the value of the duration attribute set when defining the transition.
stop() Stops the transition playback.

These methods exist not directly on the element with the transition added, but the element's filters[] object, which contains a collection of all filters and transitions added to the element. With an element that only has one transition defined, element.filters[0] gives us access to that transition, while element.filters[0].apply() for example invokes said method.

To play a transition you need to call apply() and play() at a minimum in a specific order:

  1. Call apply() before the image or content changes state, to capture its "pre" state.
  2. Change the state of the image or content, by updating its "src" or "innerHTML" property, for example.
  3. Call play() to play  the transition over the content's changing of state.

The important thing here is that the changing of the content's state -or step 2- should always be sandwiched between apply() and play(). A content state change can be anything from changing the content's CSS "visibility"/ "display" properties, "src" (if an image), or ".innerHTML". With that said, here's Take 2 of our demonstration above, this time, with a groovy "GradientWipe" transition added:


Change image

<style type="text/css">

#fancyvocation{
-ms-filter: "progid:DXImageTransform.Microsoft.GradientWipe(duration=2)";
filter :progid:DXImageTransform.Microsoft.GradientWipe(duration=2);
}

</style>

<script type="text/javascript">

function changeimagealt(){
 var myimage=document.getElementById("fancyvocation")
 if (myimage.filters && myimage.filters.length>0) //if filters[] collection is defined (only in IE)
  myimage.filters[0].apply()
 myimage.src=(myimage.src.indexOf("day.jpg")!=-1)? "night.jpg" : "day.jpg" //alternate between two images to change to
  if (myimage.filters && myimage.filters.length>0)
 myimage.filters[0].play(2) //2 seconds transition
}

</script>

<img id="fancyvocation" src="day.jpg" /><br />
<a href="javascript:changeimagealt()">Change image</a>

Note the test for the filters[] object first to make sure that not only is this object defined on the element, but that an actual filter/transition exists (length is greater than 0). This ensures our final code is cross browser friendly.

Apart from the aforementioned 3 methods, all IE transitions also share a few properties that may come in handy for more intricate set ups:

Property

Description
Duration Sets/ gets the length of time in seconds the transition takes to complete. Attribute: duration.
Enabled Boolean that sets or retrieves the state of the transition (either enable or disable it). Attribute: enabled.
status Integer that returns the status of the transition:
  • 0: Transition has stopped.
  • 1: Transition has been applied.
  • 2: Transition is playing.

For example, to probe at any time whether the transition is still running on the element, you could construct the below test:

if (myimage.filters[0].status==2){
//transition is still running
}

Transitioning an element from "hidden" to "visible"

As mentioned, a transition can be applied during a content's changing of state, which includes changing the content's CSS "visibility" or "display" properties, "src" (if an image), or ".innerHTML" properties. To illustrate this fact, the below plays a transition on an element when its "visibility" property is set to "visible", in effect, transitioning into itself:

JavaScript kit
Fade into view

<style type="text/css">

#mytext{
-ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=2)";
filter :progid:DXImageTransform.Microsoft.Fade(duration=2);
visibility: hidden;
width: 300px;
line-height: 24px;
font: normal 24px navy;
}

</style>

<script type="text/javascript">
function fadetext(){
 var mytext=document.getElementById("mytext")
 mytext.style.visibility="hidden"
 if (mytext.filters && mytext.filters.length>0) //if filters[] collection is defined (only in IE)
  mytext.filters[0].apply()
 mytext.style.visibility="visible"
 if (mytext.filters && mytext.filters.length>0)
  mytext.filters[0].play()
}
</script>

<div id="mytext">JavaScript kit</div>
<a href="javascript: fadetext()">Fade into view</a>

We now have all the pieces in place to create a full blown image slideshow that takes advantage of IE Transitions...