\r
X_NodeAnime_hasTransform = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],\r
\r
- X_NodeAnime_hasDXTransform = 5.5 <= X_UA[ 'IE' ] && X_UA[ 'IE' ] < 9 && X_UA[ 'ActiveX' ],\r
+ X_NodeAnime_hasDXTransform = 5.5 <= X_UA[ 'IE' ] && X_UA[ 'IE' ] < 9 && X_UA[ 'ActiveX' ], // IEHost が 11 の場合不可\r
\r
/* Opera mobile で translateZ(0) が有効だと XY が 0 0 になる */\r
/* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */\r
- X_NodeAnime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '',\r
-\r
- X_NodeAnime_transitionProps = X_NodeAnime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top';\r
+ X_NodeAnime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] &&\r
+ !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] &&\r
+ !( X_UA[ 'IE' ] === 11 ) && !( X_UA[ 'IEHost' ] === 11 ) ? ' translateZ(0)' : '',\r
\r
/*\r
* phase:\r
* 7: アニメーション中\r
*/\r
\r
-var X_NODE_ANIME_RESET = 1,\r
+ X_NODE_ANIME_RESET = 1,\r
X_NODE_ANIME_STAY_GPU = 2,\r
\r
X_NodeAnime_DEFAULT = {\r
scrollY : NaN, fromScrollY : NaN, toScrollY : NaN //,\r
//doScroll : false//,\r
//duration : 0\r
- //phase, lazyRelease, easing, follower, releaseNow, inited, progress doScroll, fallbackKind\r
+ //phase, lazyRelease, easing, follower, releaseNow, inited, progress, fallback\r
// fromTime, toTime\r
};\r
\r
obj.transform = ( X_Type_isFinite( obj.x ) || X_Type_isFinite( obj.y ) || obj.lazyRelease ) && X_NodeAnime_hasTransform;\r
obj.doScroll = 0 <= obj.toScrollX || 0 <= obj.toScrollY;\r
obj.fallback = 0;\r
+ obj.altX = fallback & 8 ? 'right' : 'left'; \r
+ obj.altY = fallback & 16 ? 'bottom' : 'top';\r
\r
// scale\r
- if( obj.toScaleX !== 1 && obj.fromScaleX !== 1 && obj.toScaleY !== 1 && obj.fromScaleY !== 1 ){\r
+ if( obj.toScaleX !== 1 || obj.fromScaleX !== 1 || obj.toScaleY !== 1 || obj.fromScaleY !== 1 ){\r
sameRate = obj.fromScaleX === obj.fromScaleY && obj.toScaleX === obj.toScaleY;\r
\r
if( X_NodeAnime_hasTransform ){\r
obj.transform = true;\r
} else\r
- if( X_NodeAnime_hasDXTransform && ( fallback & 16 ) ){ // DX Transform\r
- obj.fallback = 16;\r
+ if( X_NodeAnime_hasDXTransform && ( fallback & 32 ) ){ // DX Transform\r
+ obj.fallback = 32;\r
} else\r
if( ( fallback & 4 ) && sameRate ){ // zoom\r
obj.fallback = 4;\r
if( X_NodeAnime_hasTransform ){\r
obj.transform = true;\r
} else\r
- if( X_NodeAnime_hasDXTransform && ( fallback & 16 ) ){ // DX Transform\r
- obj.fallback = 16;\r
+ if( X_NodeAnime_hasDXTransform && ( fallback & 32 ) ){ // DX Transform\r
+ obj.fallback = 32;\r
};\r
};\r
\r
*/\r
function X_NodeAnime_detectWaitAnimation( xnode, duration, isTest ){\r
var list = X_NodeAnime_QUEUE,\r
- i = 0, _xnode;\r
+ i = 0, _xnode, obj;\r
\r
for( ; _xnode = list[ i ]; ++i ){\r
if( _xnode === xnode ) break;\r
now = X_Timer_now(),\r
c = false,\r
i, xnode, obj, _xnode,\r
- rm, easing, lazy;\r
+ rm, progress, easing, lazy;\r
\r
if( X_NodeAnime_needsDetection ){\r
X_NodeAnime_needsDetection = false;\r
switch( obj.phase ){\r
case 7 : // アニメーション中\r
if( now < obj.toTime ){\r
- obj.progress = ( now - obj.fromTime ) / obj.duration;\r
- easing = obj.easing( obj.progress );\r
+ obj.progress = progress = ( now - obj.fromTime ) / obj.duration;\r
+ easing = obj.easing( progress );\r
obj.x = ( obj.toX - obj.fromX ) * easing + obj.fromX;\r
obj.y = ( obj.toY - obj.fromY ) * easing + obj.fromY;\r
obj.rotate = ( obj.toRotate - obj.fromRotate ) * easing + obj.fromRotate;\r
obj.alpha = ( obj.toAlpha - obj.fromAlpha ) * easing + obj.fromAlpha;\r
obj.scrollX = ( obj.toScrollX - obj.fromScrollX ) * easing + obj.fromScrollX;\r
obj.scrollY = ( obj.toScrollY - obj.fromScrollY ) * easing + obj.fromScrollY;\r
- X_NodeAnime_updatePosition( xnode, obj, obj.progress, true );\r
+ X_NodeAnime_updatePosition( xnode, obj, progress, true );\r
c = true;\r
break;\r
};\r
\r
//console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU );\r
if( obj.transform ){\r
- if( x === x || y === y ) str += ' translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)';\r
+ if( ( x === x || y === y ) && ( x !== 0 && y !== 0 ) ) str += ' translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)';\r
if( rotate < 0 || 0 < rotate ) str += ' rotate(' + rotate + 'deg)'; // opera は rad?\r
if( skewX < 0 || 0 < skewX ) str += ' skewX(' + skewX + 'deg)';\r
if( skewY < 0 || 0 < skewY ) str += ' skewY(' + skewY + 'deg)';\r
}; \r
}; \r
} else\r
- if( obj.fallback === 16 ){\r
- xnode[ 'css' ]( 'dxtransform', [ x | 0, y | 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY ] );\r
+ if( obj.fallback === 32 ){\r
+ xnode[ 'css' ]( 'dxtransform', [ x | 0, y | 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY, obj.altX, obj.altY ] );\r
} else {\r
- x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' );\r
- y === y && xnode[ 'css' ]( 'top', ( y | 0 ) + 'px' );\r
+ x === x && xnode[ 'css' ]( obj.altX, ( x | 0 ) + 'px' );\r
+ y === y && xnode[ 'css' ]( obj.altY, ( y | 0 ) + 'px' );\r
\r
switch( obj.fallback ){\r
case 4 :\r
\r
if( obj.doScroll && xnode[ '_rawObject' ] ){\r
console.log( 'ok ' + ratio );\r
- xnode[ '_rawObject' ].scrollLeft = obj.scrollX | 0;\r
- xnode[ '_rawObject' ].scrollTop = obj.scrollY | 0;\r
+ xnode[ '_rawObject' ].scrollLeft = obj.scrollX | 0;\r
+ xnode[ '_rawObject' ].scrollTop = obj.scrollY | 0;\r
//X_Node_reserveUpdate();\r
};\r
\r