Webkit browser jQuery transformations/transitions not working with jSplitSlider
Posted
by
user3689793
on Stack Overflow
See other posts from Stack Overflow
or by user3689793
Published on 2014-05-30T03:22:17Z
Indexed on
2014/05/30
3:25 UTC
Read the original article
Hit count: 213
I am helping to build a site and i'm having an issue with the functionality of an add-in called jsplitslider when running it in chrome. Right now, when I navigate between the slides, the div's get stuck on top of each other and never clear the webkit transformations/animations:
<div class="sl-content-slice" style="transition: all 800ms ease-in-out; -webkit-transition: all 800ms ease-in-out;">
I think the problem is due to timing of the functions, but I can't seem to figure out where I would need to add a setTimeout(). I only think this because I exhausted a lot of the other options like display: inline-block, notransitions css, etc.
I'm desperate to figure out how to make this work in chrome. It works in FF and IE(surprisingly enough). I'm not great at webcoding, so any help will be appreciated! The code on the site isn't minimized.
Here is the jQuery where I think the problem lies:
var cssStyle = config.orientation === 'horizontal' ? {
marginTop : -this.size.height / 2
} : {
marginLeft : -this.size.width / 2
},
// default slide's slices style
resetStyle = {
'transform' : 'translate(0%,0%) rotate(0deg) scale(1)',
opacity : 1
},
// slice1 style
slice1Style = config.orientation === 'horizontal' ? {
'transform' : 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
} : {
'transform' : 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
},
// slice2 style
slice2Style = config.orientation === 'horizontal' ? {
'transform' : 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
} : {
'transform' : 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
};
if( this.options.optOpacity ) {
slice1Style.opacity = 0;
slice2Style.opacity = 0;
}
// we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "next"
// or going "prev" according to the direction.
// the idea is to make it more interesting by giving some animations to the respective slide's elements
//( dir === 'next' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' );
$currentSlide.removeClass( 'sl-trans-elems' );
var transitionProp = {
'transition' : 'all ' + this.options.speed + 'ms ease-in-out'
};
// add the 2 slices and animate them
$movingSlide.css( 'z-index', this.slidesCount )
.find( 'div.sl-content-wrapper' )
.wrap( $( '<div class="sl-content-slice" />' ).css( transitionProp ) )
.parent()
.cond(
dir === 'prev',
function() {
var slice = this;
this.css( slice1Style );
setTimeout( function() {
slice.css( resetStyle );
}, 150 );
},
function() {
var slice = this;
setTimeout( function() {
slice.css( slice1Style );
}, 150 );
}
)
.clone()
.appendTo( $movingSlide )
.cond(
dir === 'prev',
function() {
var slice = this;
this.css( slice2Style );
setTimeout( function() {
$currentSlide.addClass( 'sl-trans-back-elems' );
if( self.support ) {
slice.css( resetStyle ).on( self.transEndEventName, function() {
self._onEndNavigate( slice, $currentSlide, dir );
} );
}
else {
self._onEndNavigate( slice, $currentSlide, dir );
}
}, 150 );
},
function() {
var slice = this;
setTimeout( function() {
$nextSlide.addClass( 'sl-trans-elems' );
if( self.support ) {
slice.css( slice2Style ).on( self.transEndEventName, function() {
self._onEndNavigate( slice, $currentSlide, dir );
} );
}
else {
self._onEndNavigate( slice, $currentSlide, dir );
}
}, 150 );
}
)
.find( 'div.sl-content-wrapper' )
.css( cssStyle );
$nextSlide.show();
},
_validateValues : function( config ) {
// OK, so we are restricting the angles and scale values here.
// This is to avoid the slices wrong sides to be shown.
// you can adjust these values as you wish but make sure you also ajust the
// paddings of the slides and also the options.translateFactor value and scale data attrs
if( config.slice1angle > this.options.maxAngle || config.slice1angle < -this.options.maxAngle ) {
config.slice1angle = this.options.maxAngle;
}
if( config.slice2angle > this.options.maxAngle || config.slice2angle < -this.options.maxAngle ) {
config.slice2angle = this.options.maxAngle;
}
if( config.slice1scale > this.options.maxScale || config.slice1scale <= 0 ) {
config.slice1scale = this.options.maxScale;
}
if( config.slice2scale > this.options.maxScale || config.slice2scale <= 0 ) {
config.slice2scale = this.options.maxScale;
}
if( config.orientation !== 'vertical' && config.orientation !== 'horizontal' ) {
config.orientation = 'horizontal'
}
},
_onEndNavigate : function( $slice, $oldSlide, dir ) {
// reset previous slide's style after next slide is shown
var $slide = $slice.parent(),
removeClasses = 'sl-trans-elems sl-trans-back-elems';
// remove second slide's slice
$slice.remove();
// unwrap..
$slide.css( 'z-index', 10 )
.find( 'div.sl-content-wrapper' )
.unwrap();
// hide previous current slide
$oldSlide.hide().removeClass( removeClasses );
$slide.removeClass( removeClasses );
// now we can navigate again..
this.isAnimating = false;
this.options.onAfterChange( $slide, this.current );
},
Sorry if I missed any conventions when posting, this is my first S.O. post. Thanks in advance for any help.
© Stack Overflow or respective owner
