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
Split 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) {
var
$allModules = $(this),
$body = $('body'),
time = new Date().getTime(),
performance = [],
@ -46,6 +47,7 @@ $.fn.shape = function(parameters) {
$side = $module.find(selector.side),
// private variables
nextSelector = false,
$activeSide,
$nextSide,
@ -104,46 +106,26 @@ $.fn.shape = function(parameters) {
module.reset();
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
.addClass(className.animating)
.removeClass(className.css)
;
module.set.stageSize();
module.repaint();
$module
.addClass(className.animating)
;
$activeSide
.animate({
opacity: 0
}, settings.duration, settings.easing)
.addClass(className.hidden)
;
$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() {
module.verbose('Animating states reset');
$module
.removeClass(className.css)
.removeClass(className.animating)
.attr('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: {
defaultSide: function() {
@ -299,27 +179,56 @@ $.fn.shape = function(parameters) {
? $activeSide.next(selector.side)
: $module.find(selector.side).first()
;
nextSelector = false;
module.verbose('Active side set to', $activeSide);
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() {
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
.css({
width : stage.width,
height : stage.height
})
.css(newSize)
;
module.verbose('Resizing stage to fit new content', newSize);
},
nextSide: function(selector) {
nextSelector = selector;
$nextSide = $module.find(selector);
if($nextSide.size() === 0) {
module.error(error.side);
@ -345,6 +254,7 @@ $.fn.shape = function(parameters) {
up: function() {
module.debug('Flipping up', $nextSide);
if( !module.is.animating() ) {
module.set.stageSize();
module.stage.above();
module.animate( module.get.transform.up() );
}
@ -356,6 +266,7 @@ $.fn.shape = function(parameters) {
down: function() {
module.debug('Flipping down', $nextSide);
if( !module.is.animating() ) {
module.set.stageSize();
module.stage.below();
module.animate( module.get.transform.down() );
}
@ -367,6 +278,7 @@ $.fn.shape = function(parameters) {
left: function() {
module.debug('Flipping left', $nextSide);
if( !module.is.animating() ) {
module.set.stageSize();
module.stage.left();
module.animate(module.get.transform.left() );
}
@ -378,6 +290,7 @@ $.fn.shape = function(parameters) {
right: function() {
module.debug('Flipping right', $nextSide);
if( !module.is.animating() ) {
module.set.stageSize();
module.stage.right();
module.animate(module.get.transform.right() );
}
@ -389,6 +302,7 @@ $.fn.shape = function(parameters) {
over: function() {
module.debug('Flipping over', $nextSide);
if( !module.is.animating() ) {
module.set.stageSize();
module.stage.behind();
module.animate(module.get.transform.over() );
}
@ -400,6 +314,7 @@ $.fn.shape = function(parameters) {
back: function() {
module.debug('Flipping back', $nextSide);
if( !module.is.animating() ) {
module.set.stageSize();
module.stage.behind();
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: {
above: function() {
@ -738,15 +754,10 @@ $.fn.shape.settings = {
namespace : 'shape',
// callback occurs on side change
beforeChange : 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
error: {
@ -756,9 +767,9 @@ $.fn.shape.settings = {
// classnames used
className : {
css : 'css',
animating : 'animating',
hidden : 'hidden',
loading : 'loading',
active : 'active'
},

88
src/modules/shape.less
View File

@ -14,12 +14,19 @@
*******************************/
.ui.shape {
display: inline-block;
position: relative;
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
-ms-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 {
@ -32,10 +39,18 @@
.ui.shape .side {
opacity: 1;
width: 100%;
margin: 0em !important;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-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 {
@ -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;
top: -9999px;
left: -9999px;
}
/*--------------
Animating
---------------*/
.ui.shape .animating.side {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
z-index: 100;
@ -72,7 +142,7 @@
CSS
---------------*/
.ui.shape.css {
.ui.shape.animating {
-webkit-transition:
all 0.6s ease-in-out;
;
@ -89,14 +159,17 @@
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;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-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;
-moz-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;
}
/*--------------
Active
---------------*/

Write Preview
Loading…
Cancel
Save