Update Tween and Morph to use CSS3 transitions #2053

Closed
wants to merge 6 commits into
from

Projects

None yet

5 participants

@mcfedr
mcfedr commented Sep 1, 2011

I have recently been doing some work creating a forge project that can be included and replaces Fx.Tween, Fx.Morph and Fx.Elements with versions that use css transitions instead of a normal javascript animation. This work was based on the code in http://mootools.net/forge/p/fx_tween_css3.

Having it as an extension has various limitations, the biggest being that the other Fx classes in mootools (eg Fx.Accordion) don't benefit because they are created before the new code is included.

I also think that there is no reason not to use css3 everywhere, so why not update the core code. It will still fall back to the old code when css3 is not available or doesn't support the requested transition.

This code is a first draft so to speak, not all the Fx methods (pause, cancel) are supported yet, and I am sure there is some code style changes that should be made etc, I am posting this to see whether there is interest in taking this on, and if so I will see about cleaning up the code and implementing the other functions where possible.

The code for my Fx.Elements is in my mootools-more repo.

Contributor

As far as I'm all for embracing CSS Transitions, if anything, this should be an integrated part of the Fx class, so no *.CSS3.

Perhaps, try pushing it into *-more, rather than *-core. If people are happy with it, perhaps it could make its way into 2.0-core

@realityking realityking commented on the diff Sep 1, 2011
Source/Fx/Fx.CSS3.js
+
+requires: [Core/Class.Extras, Core/Element.Event, Core/Element.Style, Core/Fx]
+
+provides: [Fx.CSS3Funcs]
+...
+*/
+
+(function() {
+
+ Element.NativeEvents.transitionend = 2;
+ Element.NativeEvents.webkitTransitionEnd = 2;
+ Element.NativeEvents.oTransitionEnd = 2;
+ Element.NativeEvents.msTransitionEnd = 2;
+
+ Element.Events.transitionend = {
+ base: Browser.safari || Browser.chrome ? 'webkitTransitionEnd' : (Browser.opera ? 'oTransitionEnd' : (Browser.ie && Browser.version > 8 ? 'msTransitionEnd' : 'transitionend'))
realityking
realityking Sep 1, 2011

Internet Explorer 9 doesn't support CSS3 Transitions, 10 most likely will.

Also I wouldn't fall back to the non-prefixed version. To my knowledge both Webkit and Mozilla discourage that to keep room for API changes for the non-prefixed version. A library as widely deployed as MooTools could set the API in stone which is not desirable.

arian
arian Sep 1, 2011 Owner

This could be done with feature detection indeed...
This is a snippet that I used once:

var Features = (function(){

    var hasTransition = (function(){
        var prefixes = ['ms', 'O', 'Moz', 'webkit', ''],
            style = document.documentElement.style;
        for (var l = prefixes.length; l--;){
            var prefix = prefixes[l];
            if (typeof style[(prefix ? prefix + 'T' : '') + 'ransition'] != 'undefined') return prefix;
        }
        return false;
    })();

    var events = {
        '': 'transitionend',
        'webkit': 'webkitTransitionEnd',
        'O': 'OTransitionEnd'
    };
    events.Moz = events.ms = events[''];

    return {
        transition: hasTransition != false,
        transitionEnd: hasTransition != false ? events[hasTransition] : null
    };

})();
realityking
realityking Sep 1, 2011

True, but that wasn't the point I was trying to make. MooTools should not assume that unprefixed transition property and the unprefixed transition end event behave the same as the current prefixed implementations. That is the whole point of vendor prefixes.

The big problem I'm seeing with this is that different properties can be transitioned based on the browser. For example I can transition the border-radius property just fine in Webkit and Firefox but I can't in Opera, this has to be taken into account somehow.

Owner
arian commented Sep 1, 2011
Owner
cpojer commented Sep 1, 2011

I would much rather see this on the forge or in More so we get some time to see how it works out. If it is good, I'm not opposed to integrating part of this functionality to Core at a later time.

@cpojer cpojer closed this Sep 1, 2011
Owner
cpojer commented Sep 1, 2011

Also, thank you for your work in this area. We would just like to keep Core clean and lean. Part of the reason we haven't added CSS3 stuff to Core yet is because we want to see how it develops.

Owner
cpojer commented Sep 1, 2011

Also, thank you for your work in this area. We would just like to keep Core clean and lean. Part of the reason we haven't added CSS3 stuff to Core yet is because we want to see how it develops.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment