Visibility Control
taccgl™ normally shows or animates images of HTML elements, while the HTML elementes themselves
remain invisible.
taccgl™ uses one of two CSS declarations to make an HTML element invisible: either "visibility:hidden"
or "opacity:0". Both declarations visually have the same effect: the element vanishes and
becomes invisible. When using "visibility:hidden" in addition the element stops receiving
any events (e.g. onclick) while with "opacity:0" events are not effected.
So using "opacity:0" an element can still remain active, even if actually an image of the element
is shown using taccgl™ and not the element itself --- as long as the image of the element is not moved or resized.
When using actor the HTML element is automatically hidden before a transition and
made visible afterwards. When using a this needs to be done explicitly using
the methods hideAtBegin and visAtEnd or opacityAtBegin and opacityAtEnd.
Examples
taccgl.a("testimg").paint().hideAtBegin().visAtEnd().to(500,500,1).start(); | RUN |
taccgl.a("testimg").paint().opacityAtBegin().opacityAtEnd().to(500,500,1).start(); | RUN |
In special cases you can leave out one or both of these method calls, e.g. if you do not want to hide
the HTML element (i.e. show the HTML element and the image), or if you want the HTML element to
remain hidden after the animation.
Examples
taccgl.a("testimg").paint().to(500,500,1).start(); | RUN |
taccgl.a("testimg").paint().hideAtBegin().to(500,500,1).start(); | RUN |
taccgl.a("testimg").paint().opacityAtBegin().to(500,500,1).start(); | RUN |
taccgl.a("testimg").paint().visAtEnd('').from(500,500,1).start(); | RUN |
taccgl.a("testimg").paint().opacityAtEnd('').from(500,500,1).start(); | RUN |
|