Re: Testing if ready after class change

Path	csiph.com!v102.xanadu-bbs.net!xanadu-bbs.net!eternal-september.org!feeder.eternal-september.org!mx04.eternal-september.org!.POSTED!not-for-mail
From	Gus Richter <gusrichter@netscape.net>
Newsgroups	comp.lang.javascript, comp.infosystems.www.authoring.stylesheets
Subject	Re: Testing if ready after class change
Date	Mon, 21 May 2012 21:49:21 -0400
Organization	A noiseless patient Spider
Lines	40
Message-ID	<jperb4$3ns$1@dont-email.me> (permalink)
References	<jpdum7$48m$1@news.albasani.net>
Mime-Version	1.0
Content-Type	text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding	7bit
Injection-Date	Tue, 22 May 2012 01:49:25 +0000 (UTC)
Injection-Info	mx04.eternal-september.org; posting-host="88rNEqTJKxYRFCllQYX/rw"; logging-data="3836"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX19OFekQa9MuBmjlTVOV0uOTgmVjofSWQSI="
User-Agent	Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20120428 Thunderbird/12.0.1
In-Reply-To	<jpdum7$48m$1@news.albasani.net>
X-Antivirus-Status	Clean
X-Antivirus	avast! (VPS 120521-1, 05/21/2012), Outbound message
Cancel-Lock	sha1:Y7ZUqp+rsBBygKURQhK4pRapVlA=
Xref	csiph.com comp.lang.javascript:14069 comp.infosystems.www.authoring.stylesheets:2984

Cross-posted to 2 groups.

Show key headers only | View raw

On 5/21/2012 1:40 PM, j wrote:
> I have a CSS3 slideshow. I'm setting a class (element.className) which
> is the starting point of the transition, and then setting a class which
> is the end point.
>
> For example to zoom in center:
> /* starting point */
> .enlarged img{
> width: 150%;
> height: 150%;
> opacity: 0;
> margin-left: -25%;
> margin-top: -25%;
> }
>
> .shrink_center_center img{
> width: 100%;
> height: 100%;
> ...
> transition-property:margin,opacity,width,height;
> ...
> }
>
>
> There needs to be sufficient time between setting the starting class and
> setting the transition, if not, the transition gets garbled. (slower in
> my Chrome,~100 mS)
>
> How can you tell when the class for the image is ready? I see that
> readystate does not work on individual elements (at least in FF).

I gave you a link which would have lead you to:
   <https://developer.mozilla.org/en/CSS/CSS_transitions>
There are detailed descriptions and examples. There is one demo 
including -moz-, -webkit- and -ms- proprietory prefixes:
   <http://jsfiddle.net/RwtHn/5/>

-- 
Gus

Thread

Testing if ready after class change j <mung_me@att.net> - 2012-05-21 13:40 -0400
  Re: Testing if ready after class change Gus Richter <gusrichter@netscape.net> - 2012-05-21 21:49 -0400
    Re: Testing if ready after class change j <mung_me@att.net> - 2012-05-22 00:07 -0400

csiph-web