1

Can anyone show me how to use CSS3 to do this?

http://jsfiddle.net/dYYZP/65/

I've been trying to figure out how to call CSS3 transitions via events and stopping transitions like jQuery's stop(true, false) for months.

<div id="outer"></div>
<div id="inner"></div>


var under = true;
$("#outer").bind({
    click : function() {
        if(under){
            $("#inner").stop(true, false).animate( {
                left: 50
            }, 500);
        }
        else{
            $("#inner").stop(true, false).animate( {
                left: -50
            }, 500);    
        }
        under = !under;
    }
});
Community
  • 1
  • 1
  • (offtopic) this code simplified (http://jsfiddle.net/dYYZP/76/) – Roko C. Buljan Jan 14 '13 at 03:11
  • @roXon I prefer not using the ternary because I have tons of animations firing. The less thinking js does, the better in my case, but thank-you. –  Jan 14 '13 at 03:14
  • believe me that one day you become friend with ternary, it will be MORE readable than an if else in 12 lines of code, specially if you need to tackle wit tons of animations. Than may be you'll start to program more oriented also, and creating reusable animation functions. – Roko C. Buljan Jan 14 '13 at 03:17
  • Any way. how you plan to register a click using pure css ? – Roko C. Buljan Jan 14 '13 at 03:18
  • @roXon i loooooove ternary, but i don't understand that last condescension. –  Jan 14 '13 at 03:19
  • @roXon have no idea. that's why i'm asking. –  Jan 14 '13 at 03:20
  • The last "`condescension`" is a simple Boolean toggle. will togge to true if false and vice-versa. – Roko C. Buljan Jan 14 '13 at 03:26

2 Answers2

3

http://jsfiddle.net/dYYZP/81 (note that I only included -webkit for convenience).

The CSS 2D transform translate can be used to move an element along the X/Y axis. This, with a combination of CSS3 transitions, allows for a similar animation.

If you wanted to do this purely with CSS, then you would have to make the red box a <label> for checkbox element and then have a selector like :checked + .slideout that would include the translate rule.

There is no way to stop CSS transitions during animation; only once the animation is complete (by removing the rule).

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • cause your example is exactly what the OP needs, but as far we need to register a click event using JS I think that the `.toggleClass()` i used is simplifying your demo (and the OP needs) a LOT :) – Roko C. Buljan Jan 14 '13 at 03:27
  • @ExplosionPills: It's because roXon simplified your script. – dunli Jan 14 '13 at 03:27
  • @roXon I'm all for simplifying the script .. I was just building off of what the OP already had since it was there after all. It's plausible that he wants to do more than just toggle the class on click as well. – Explosion Pills Jan 14 '13 at 03:28
  • @ExplosionPills you're totally right. in that case you could suggest a 2-function method that will imply the use of `.toggle(fn1, fn2)` :) – Roko C. Buljan Jan 14 '13 at 03:29
  • @roXon why is it what I need if it doesn't animate the way it does in my original fiddle? it doesn't work –  Jan 14 '13 at 03:41
  • @JoeCoderGuy are you sure? jave you tried this demo? http://jsfiddle.net/dYYZP/78/ – Roko C. Buljan Jan 14 '13 at 03:44
  • @JoeCoderGuy I wasn't going for an *exact* animation, I was just trying to illustrate the concept. If you're really going to be that picky, then here you go: http://jsfiddle.net/dYYZP/81/ – Explosion Pills Jan 14 '13 at 03:46
  • @roXon are you? yours doesn't work in my chrome Version 23.0.1271.97 m –  Jan 14 '13 at 03:49
  • @ExplosionPills please link to new fiddle in answer so i can +1 –  Jan 14 '13 at 03:50
  • @ExplosionPills if you can confirm that `addClassing`ing is smoother than `css`ing, i'll give check –  Jan 14 '13 at 03:53
  • @JoeCoderGuy I think that you're really misunderstanding here .. my answer is more or less identical to dunli's, I just expanded on the answer by telling you about `translate` and explaining that you can't stop animations. I doubt either one is noticeably smoother, but since changing the class and using transitions allows the browser to do the animation on its own I would say it is inherently better than using user-defined JavaScript. – Explosion Pills Jan 14 '13 at 03:57
  • @ExplosionPills I appreciate it! I need smoother because I'm doing a TON of animations on my site. Are there docs that can confirm changing the class is smoother? –  Jan 14 '13 at 04:03
  • @JoeCoderGuy I doubt it. Since it's probably situational you may just want to do your own tests to compare .. it's not difficult to switch between either implementation. – Explosion Pills Jan 14 '13 at 04:05
  • @JoeCoderGuy http://jsfiddle.net/dYYZP/82/ this one works? just added the missing -browser-specifics about we're talking all the time – Roko C. Buljan Jan 14 '13 at 04:08
  • @roXon no. ex's answer does –  Jan 14 '13 at 04:20
  • @JoeCoderGuy you mean my answer does not work at all? Or was just the problem for you to adjust the px ? – Roko C. Buljan Jan 14 '13 at 04:22
  • @roXon no, i meant what i said. i have no problem adjusting any `px`. i could tell you how if you like. –  Jan 14 '13 at 04:35
  • @ExplosionPills yep, you're right. using the class is faster. just tried to mix the two, and the `removeClass`-`addClass` combo happens before `css` lol. ty very much! –  Jan 14 '13 at 18:34
1

Is this what you want to do?

I just added below code to your #inner's css:

transition:left .5s;
-moz-transition:left .5s;
-webkit-transition:left .5s;

Hope it helps.

dunli
  • 1,356
  • 9
  • 18