richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Duration now available in shape, rewrite of core animation

pull/2229/head
jlukic 11 years ago
parent
72e2226265
commit
d5f4a3a43d
2 changed files with 243 additions and 158 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 313
      src/modules/shape.js
  2. 88
      src/modules/shape.less

313
src/modules/shape.js
View File

@ -14,6 +14,7 @@
$.fn.shape = function(parameters) { $.fn.shape = function(parameters) {
var var
$allModules = $(this), $allModules = $(this),
$body = $('body'),
time = new Date().getTime(), time = new Date().getTime(),
performance = [], performance = [],
@ -46,6 +47,7 @@ $.fn.shape = function(parameters) {
$side = $module.find(selector.side), $side = $module.find(selector.side),
// private variables // private variables
nextSelector = false,
$activeSide, $activeSide,
$nextSide, $nextSide,
@ -104,46 +106,26 @@ $.fn.shape = function(parameters) {
module.reset(); module.reset();
module.set.active(); module.set.active();
}; };
if(settings.useCSS) {
if(module.get.transitionEvent()) {
module.verbose('Starting CSS animation');
$module
.addClass(className.animating)
;
module.set.stageSize();
module.repaint();
$module
.addClass(className.css)
;
$activeSide
.addClass(className.hidden)
;
$sides
.css(propertyObject)
.one(module.get.transitionEvent(), callback)
;
}
else {
callback();
}
}
else {
// not yet supported until .animate() is extended to allow RotateX/Y
module.verbose('Starting javascript animation');
if(module.get.transitionEvent()) {
module.verbose('Starting CSS animation');
$module $module
.addClass(className.animating) .addClass(className.animating)
.removeClass(className.css)
; ;
module.set.stageSize();
module.repaint(); module.repaint();
$module
.addClass(className.animating)
;
$activeSide $activeSide
.animate({
opacity: 0
}, settings.duration, settings.easing)
.addClass(className.hidden)
; ;
$sides $sides
.animate(propertyObject, settings.duration, settings.easing, callback)
.css(propertyObject)
.one(module.get.transitionEvent(), callback)
; ;
module.set.duration(settings.duration);
}
else {
callback();
} }
}, },
@ -162,7 +144,6 @@ $.fn.shape = function(parameters) {
reset: function() { reset: function() {
module.verbose('Animating states reset'); module.verbose('Animating states reset');
$module $module
.removeClass(className.css)
.removeClass(className.animating) .removeClass(className.animating)
.attr('style', '') .attr('style', '')
.removeAttr('style') .removeAttr('style')
@ -190,107 +171,6 @@ $.fn.shape = function(parameters) {
} }
}, },
get: {
transform: {
up: function() {
var
translate = {
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
z: -($activeSide.outerHeight() / 2)
}
;
return {
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)'
};
},
down: function() {
var
translate = {
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
z: -($activeSide.outerHeight() / 2)
}
;
return {
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)'
};
},
left: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
z : -($activeSide.outerWidth() / 2)
}
;
return {
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)'
};
},
right: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
z : -($activeSide.outerWidth() / 2)
}
;
return {
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)'
};
},
over: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
}
;
return {
transform: 'translateX(' + translate.x + 'px) rotateY(180deg)'
};
},
back: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
}
;
return {
transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)'
};
}
},
transitionEvent: function() {
var
element = document.createElement('element'),
transitions = {
'transition' :'transitionend',
'OTransition' :'oTransitionEnd',
'MozTransition' :'transitionend',
'WebkitTransition' :'webkitTransitionEnd'
},
transition
;
for(transition in transitions){
if( element.style[transition] !== undefined ){
return transitions[transition];
}
}
},
nextSide: function() {
return ( $activeSide.next(selector.side).size() > 0 )
? $activeSide.next(selector.side)
: $module.find(selector.side).first()
;
}
},
set: { set: {
defaultSide: function() { defaultSide: function() {
@ -299,27 +179,56 @@ $.fn.shape = function(parameters) {
? $activeSide.next(selector.side) ? $activeSide.next(selector.side)
: $module.find(selector.side).first() : $module.find(selector.side).first()
; ;
nextSelector = false;
module.verbose('Active side set to', $activeSide); module.verbose('Active side set to', $activeSide);
module.verbose('Next side set to', $nextSide); module.verbose('Next side set to', $nextSide);
}, },
duration: function(duration) {
duration = duration || settings.duration;
duration = (typeof duration == 'number')
? duration + 'ms'
: duration
;
module.verbose('Setting animation duration', duration);
$sides.add($side)
.css({
'-webkit-transition-duration': duration,
'-moz-transition-duration': duration,
'-ms-transition-duration': duration,
'-o-transition-duration': duration,
'transition-duration': duration
})
;
},
stageSize: function() { stageSize: function() {
var var
stage = {
width : $nextSide.outerWidth(),
height : $nextSide.outerHeight()
}
$clone = $module.clone().addClass(className.loading),
$activeSide = $clone.find('.' + settings.className.active),
$nextSide = (nextSelector)
? $clone.find(nextSelector)
: ( $activeSide.next(selector.side).size() > 0 )
? $activeSide.next(selector.side)
: $clone.find(selector.side).first(),
newSize = {}
; ;
module.verbose('Resizing stage to fit new content', stage);
$activeSide.removeClass(className.active);
$nextSide.addClass(className.active);
$clone.prependTo($body);
newSize = {
width : $nextSide.outerWidth(),
height : $nextSide.outerHeight()
};
$clone.remove();
$module $module
.css({
width : stage.width,
height : stage.height
})
.css(newSize)
; ;
module.verbose('Resizing stage to fit new content', newSize);
}, },
nextSide: function(selector) { nextSide: function(selector) {
nextSelector = selector;
$nextSide = $module.find(selector); $nextSide = $module.find(selector);
if($nextSide.size() === 0) { if($nextSide.size() === 0) {
module.error(error.side); module.error(error.side);
@ -345,6 +254,7 @@ $.fn.shape = function(parameters) {
up: function() { up: function() {
module.debug('Flipping up', $nextSide); module.debug('Flipping up', $nextSide);
if( !module.is.animating() ) { if( !module.is.animating() ) {
module.set.stageSize();
module.stage.above(); module.stage.above();
module.animate( module.get.transform.up() ); module.animate( module.get.transform.up() );
} }
@ -356,6 +266,7 @@ $.fn.shape = function(parameters) {
down: function() { down: function() {
module.debug('Flipping down', $nextSide); module.debug('Flipping down', $nextSide);
if( !module.is.animating() ) { if( !module.is.animating() ) {
module.set.stageSize();
module.stage.below(); module.stage.below();
module.animate( module.get.transform.down() ); module.animate( module.get.transform.down() );
} }
@ -367,6 +278,7 @@ $.fn.shape = function(parameters) {
left: function() { left: function() {
module.debug('Flipping left', $nextSide); module.debug('Flipping left', $nextSide);
if( !module.is.animating() ) { if( !module.is.animating() ) {
module.set.stageSize();
module.stage.left(); module.stage.left();
module.animate(module.get.transform.left() ); module.animate(module.get.transform.left() );
} }
@ -378,6 +290,7 @@ $.fn.shape = function(parameters) {
right: function() { right: function() {
module.debug('Flipping right', $nextSide); module.debug('Flipping right', $nextSide);
if( !module.is.animating() ) { if( !module.is.animating() ) {
module.set.stageSize();
module.stage.right(); module.stage.right();
module.animate(module.get.transform.right() ); module.animate(module.get.transform.right() );
} }
@ -389,6 +302,7 @@ $.fn.shape = function(parameters) {
over: function() { over: function() {
module.debug('Flipping over', $nextSide); module.debug('Flipping over', $nextSide);
if( !module.is.animating() ) { if( !module.is.animating() ) {
module.set.stageSize();
module.stage.behind(); module.stage.behind();
module.animate(module.get.transform.over() ); module.animate(module.get.transform.over() );
} }
@ -400,6 +314,7 @@ $.fn.shape = function(parameters) {
back: function() { back: function() {
module.debug('Flipping back', $nextSide); module.debug('Flipping back', $nextSide);
if( !module.is.animating() ) { if( !module.is.animating() ) {
module.set.stageSize();
module.stage.behind(); module.stage.behind();
module.animate(module.get.transform.back() ); module.animate(module.get.transform.back() );
} }
@ -410,6 +325,107 @@ $.fn.shape = function(parameters) {
}, },
get: {
transform: {
up: function() {
var
translate = {
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
z: -($activeSide.outerHeight() / 2)
}
;
return {
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)'
};
},
down: function() {
var
translate = {
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
z: -($activeSide.outerHeight() / 2)
}
;
return {
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)'
};
},
left: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
z : -($activeSide.outerWidth() / 2)
}
;
return {
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)'
};
},
right: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
z : -($activeSide.outerWidth() / 2)
}
;
return {
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)'
};
},
over: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
}
;
return {
transform: 'translateX(' + translate.x + 'px) rotateY(180deg)'
};
},
back: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
}
;
return {
transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)'
};
}
},
transitionEvent: function() {
var
element = document.createElement('element'),
transitions = {
'transition' :'transitionend',
'OTransition' :'oTransitionEnd',
'MozTransition' :'transitionend',
'WebkitTransition' :'webkitTransitionEnd'
},
transition
;
for(transition in transitions){
if( element.style[transition] !== undefined ){
return transitions[transition];
}
}
},
nextSide: function() {
return ( $activeSide.next(selector.side).size() > 0 )
? $activeSide.next(selector.side)
: $module.find(selector.side).first()
;
}
},
stage: { stage: {
above: function() { above: function() {
@ -738,15 +754,10 @@ $.fn.shape.settings = {
namespace : 'shape', namespace : 'shape',
// callback occurs on side change // callback occurs on side change
beforeChange : function() {},
onChange : function() {}, onChange : function() {},
// use css animation (currently only true is supported)
useCSS : true,
// animation duration (useful only with future js animations)
duration : 1000,
easing : 'easeInOutQuad',
// animation duration
duration : 700,
// possible errors // possible errors
error: { error: {
@ -756,9 +767,9 @@ $.fn.shape.settings = {
// classnames used // classnames used
className : { className : {
css : 'css',
animating : 'animating', animating : 'animating',
hidden : 'hidden', hidden : 'hidden',
loading : 'loading',
active : 'active' active : 'active'
}, },

88
src/modules/shape.less
View File

@ -14,12 +14,19 @@
*******************************/ *******************************/
.ui.shape { .ui.shape {
display: inline-block;
position: relative; position: relative;
-webkit-perspective: 2000px; -webkit-perspective: 2000px;
-moz-perspective: 2000px; -moz-perspective: 2000px;
-ms-perspective: 2000px; -ms-perspective: 2000px;
perspective: 2000px; perspective: 2000px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
} }
.ui.shape .sides { .ui.shape .sides {
@ -32,10 +39,18 @@
.ui.shape .side { .ui.shape .side {
opacity: 1; opacity: 1;
width: 100%; width: 100%;
margin: 0em !important;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden; -moz-backface-visibility: hidden;
-ms-backface-visibility: hidden; -ms-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
} }
.ui.shape .side { .ui.shape .side {
@ -43,22 +58,77 @@
} }
/*******************************
Types
*******************************/
.ui.cube.shape .side {
min-width: 15em;
height: 15em;
padding: 2em;
background-color: #E6E6E6;
color: rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
}
.ui.cube.shape .side > .content {
width: 100%;
height: 100%;
display: table;
text-align: center;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.ui.cube.shape .side > .content > div {
display: table-cell;
vertical-align: middle;
font-size: 2em;
}
/******************************* /*******************************
States
Variations
*******************************/ *******************************/
.ui.text.shape.animating .sides {
position: static;
}
.ui.text.shape .side {
white-space: nowrap;
}
.ui.text.shape .side > * {
white-space: normal;
}
/*******************************
States
*******************************/
/*-------------- /*--------------
Animating
Loading
---------------*/ ---------------*/
.ui.shape.animating .sides {
.ui.loading.shape {
position: absolute; position: absolute;
top: -9999px;
left: -9999px;
} }
/*--------------
Animating
---------------*/
.ui.shape .animating.side { .ui.shape .animating.side {
position: absolute; position: absolute;
width: 100%;
top: 0px; top: 0px;
left: 0px; left: 0px;
z-index: 100; z-index: 100;
@ -72,7 +142,7 @@
CSS CSS
---------------*/ ---------------*/
.ui.shape.css {
.ui.shape.animating {
-webkit-transition: -webkit-transition:
all 0.6s ease-in-out; all 0.6s ease-in-out;
; ;
@ -89,14 +159,17 @@
all 0.6s ease-in-out; all 0.6s ease-in-out;
; ;
} }
.ui.shape.css .sides {
.ui.shape.animating .sides {
position: absolute;
}
.ui.shape.animating .sides {
-webkit-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;
} }
.ui.shape.css .side {
.ui.shape.animating .side {
-webkit-transition: opacity 0.6s ease-in-out; -webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out; -moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out; -o-transition: opacity 0.6s ease-in-out;
@ -104,6 +177,7 @@
transition: opacity 0.6s ease-in-out; transition: opacity 0.6s ease-in-out;
} }
/*-------------- /*--------------
Active Active
---------------*/ ---------------*/

Write Preview
Loading…
Cancel
Save