DHTML Lab: Cross-Browser Visibility Transitions; Explorer Reveal Transition Filters I | WebReference

DHTML Lab: Cross-Browser Visibility Transitions; Explorer Reveal Transition Filters I


Logo

Cross-Browser Visibility Transitions
Explorer reveal transitions

Element
Visibility
Transitions
 hidden-to-visible
IE4 behavior:
  as described
NS4 behavior:
Boldsame as IE4
BItalicsimilar to IE4
Italicother trans substituted
Box in 0
Box out 1
Circle in 2
Circle out 3
Wipe up 4
Wipe down 5
Wipe right 6
Wipe left 7
Vertical blinds 8
Horizontal blinds 9
Checkerboard across10
Checkerboard down11
Random dissolve12
Split vertical in13
Split vertical out14
Split horizontal in15
Split horizontal out16
Strips left down17
Strips left up18
Strips right down19
Strips right up20
Random bars horizontal21
Random bars vertical22
Random23

Explorer 4 introduced visual and transition filters with CSS syntax. In column 13, Dynamic Headline Fader, we introduced transition filters. It is highly recommended that you re-read the short transition overview page, in that column, as it introduces concepts that will be discussed in the present column.

Reveal Transitions

Transition filters come in two flavors, the Blend transition filter and the Reveal transition filters. The Blend Transition, which simply fades one state of an HTML control to another, was used for our fader technique. In the present column, we will use the Reveal Transitions.

Reveal Transitions are defined exactly as the Blend Transition is, with one additional property, transition, which specifies which of the twenty-three available transition types should be used (0-22). A twenty-fourth value (23) causes a random transition to be chosen. The table in the left column lists all the values for transition and the transition type they are associated with.

Filters are defined using CSS syntax as part of an element's style. To define a reveal transition filter for an element, we can use either of the following methods:

1. Define filter as a declaration in a style rule in the STYLE tag or external stylesheet:

<STYLE>
elementIdentifier {
  filter:revealTrans(duration=seconds,transition=type);
}
</STYLE>

2. Define filter as a declaration in an in-line STYLE=:

<TAG STYLE="filter:revealTrans(duration=seconds,transition=type">

3. Define filter dynamically in a script:

elementReference.style.filter = [keep with next line]
   "revealTrans(duration=seconds,transition=type)";

If, for example, we have a positioned element called elTrial, for which we want to define a three second "wipe down" effect, we can use the following script syntax:

elTrial.style.filter = [keep with next line]
   "revealTrans(duration=3,transition=5)";

Applying the filter

Once an element has a filter associated with it, we can invoke the transition, through script, at any time by using the apply() and play() methods of the filter. Even though we define a filter using an element's style, we invoke it through the filters property of the element itself. This property contains all the filters associated with an object. In our case, we are concerned with the reveal transition filter, which is reflected into JavaScript as: elementReference.filters.revealTrans.

As you will recall, transition filters work in this way:

  1. When we want our transition to occur, we call the apply() method of the filter: 
    elementReference.filters.revealTrans.apply();

    This freezes the present visible state of the element on our page.

  2. We then change the state of the element. For example, we can change the content of a positioned element or a TD or the BODY, by using the innerHTML property; we can change the src property of an image; we can toggle the visibility of an element, as in the following statement: 
    elementReference.style.visibility = "hidden";
  3. The change made to the element is not reflected on our page, until we use the play() method. Then the transition filter invokes a transition from the original state of the element to the new state, using the parameters we have previously defined: 
    elementReference.filters.revealTrans.play();

Our Technique

In our technique, we will be using the reveal transition filters for one purpose only: to invoke transitions of positioned elements from a visible state to a hidden state. This is only one minor possible use of the filters. We will apply them only to positioned elements and then only use them to hide the elements.

The exceptions are reveal transitions 1, 3, 14, and 16. These will be used to make elements visible.

We are limiting ourselves to this single use, since ultimately we will be creating a cross-browser script that simulates these transitions for Navigator, which has no built-in transition abilities.

When we are done, we will have created an external script, a library of transition routines, that can be used to hide your positioned elements with a little more flair than the usual visibility="hidden";.

All of this, of course, will fall into place as we build our script.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Apr. 28, 1998
Revised: Apr. 28, 1998

URL: https://www.webreference.com/dhtml/column19/transIEone.html