ryanflorence / SlideShow

Extensible mid-level MooTools slideshow class that manages transitions of elements that share the same space, typically for slideshows, tabs, and galleries.
http://ryanflorence.com/slideshow
104 stars 22 forks source link

CSS Transitions not working anymore in chrome (with solution) #13

Closed gingebaker closed 8 years ago

gingebaker commented 12 years ago

Hi

Are you still maintaining this slideshow? However, I like it very much.

Just found out that on new versions of chrome the CSS Transitions don´t work anymore. I found out that there is a fixed "translate" property implemented in webkit (see: http://www.winktoolkit.org/discussion/topic/blog-wink-2012-roadmap )

There is a solution renaming the method in CSSAnimation.js (line 30) to:

mootranslate: function(axis, value) {

According to this I also changed the Line 49 in CSSAnimation.Mootools.js:

['mootranslate', 'rotate', 'scale', 'skew', 'matrix'].each(function(method){

and all functions calls from translate to mootranlate in SlideShowCSS.js:

function go(type, axis, data){
        var transition = {
            duration: data.duration + 'ms',
            'timing-function': 'ease',
            property: 'transform'
        };

        if (type == 'blind')
            data.next.setStyle('z-index', 2);

        if (type != 'slide')
            data.next.mootranslate(axis.property, 100 * axis.inverted);

        setTimeout(function(){
            if (type != 'slide')
                data.next.setTransition(transition).mootranslate(axis.property, 0);
            if (type != 'blind')
                data.previous.setTransition(transition).mootranslate(axis.property, -(100 * axis.inverted));
        }, 0);

    }

// ....

If youre still maintaining I can send you a pull request... regards...