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

Shapes now animate height/width on transition

pull/2169/head
jlukic 10 years ago
parent
d3e5dd3170
commit
6611821d2e
3 changed files with 49 additions and 31 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 69
      src/definitions/modules/shape.js
  2. 4
      src/definitions/modules/shape.less
  3. 7
      src/themes/default/modules/shape.variables

69
src/definitions/modules/shape.js
View File

@ -216,6 +216,20 @@ $.fn.shape = function(parameters) {
; ;
}, },
currentStageSize: function() {
var
$activeSide = $module.find('.' + settings.className.active),
width = $activeSide.outerWidth(true),
height = $activeSide.outerHeight(true)
;
$module
.css({
width: width,
height: height
})
;
},
stageSize: function() { stageSize: function() {
var var
$clone = $module.clone().addClass(className.loading), $clone = $module.clone().addClass(className.loading),
@ -227,12 +241,13 @@ $.fn.shape = function(parameters) {
: $clone.find(selector.side).first(), : $clone.find(selector.side).first(),
newSize = {} newSize = {}
; ;
module.set.currentStageSize();
$activeSide.removeClass(className.active); $activeSide.removeClass(className.active);
$nextSide.addClass(className.active); $nextSide.addClass(className.active);
$clone.insertAfter($module); $clone.insertAfter($module);
newSize = { newSize = {
width : $nextSide.outerWidth(),
height : $nextSide.outerHeight()
width : $nextSide.outerWidth(true),
height : $nextSide.outerHeight(true)
}; };
$clone.remove(); $clone.remove();
$module $module
@ -371,8 +386,8 @@ $.fn.shape = function(parameters) {
up: function() { up: function() {
var var
translate = { translate = {
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
z: -($activeSide.outerHeight() / 2)
y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
z: -($activeSide.outerHeight(true) / 2)
} }
; ;
return { return {
@ -383,8 +398,8 @@ $.fn.shape = function(parameters) {
down: function() { down: function() {
var var
translate = { translate = {
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
z: -($activeSide.outerHeight() / 2)
y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
z: -($activeSide.outerHeight(true) / 2)
} }
; ;
return { return {
@ -395,8 +410,8 @@ $.fn.shape = function(parameters) {
left: function() { left: function() {
var var
translate = { translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
z : -($activeSide.outerWidth() / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
z : -($activeSide.outerWidth(true) / 2)
} }
; ;
return { return {
@ -407,8 +422,8 @@ $.fn.shape = function(parameters) {
right: function() { right: function() {
var var
translate = { translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
z : -($activeSide.outerWidth() / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
z : -($activeSide.outerWidth(true) / 2)
} }
; ;
return { return {
@ -419,7 +434,7 @@ $.fn.shape = function(parameters) {
over: function() { over: function() {
var var
translate = { translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
} }
; ;
return { return {
@ -430,7 +445,7 @@ $.fn.shape = function(parameters) {
back: function() { back: function() {
var var
translate = { translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
} }
; ;
return { return {
@ -471,10 +486,10 @@ $.fn.shape = function(parameters) {
above: function() { above: function() {
var var
box = { box = {
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
depth : { depth : {
active : ($nextSide.outerHeight() / 2),
next : ($activeSide.outerHeight() / 2)
active : ($nextSide.outerHeight(true) / 2),
next : ($activeSide.outerHeight(true) / 2)
} }
} }
; ;
@ -497,10 +512,10 @@ $.fn.shape = function(parameters) {
below: function() { below: function() {
var var
box = { box = {
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
depth : { depth : {
active : ($nextSide.outerHeight() / 2),
next : ($activeSide.outerHeight() / 2)
active : ($nextSide.outerHeight(true) / 2),
next : ($activeSide.outerHeight(true) / 2)
} }
} }
; ;
@ -523,10 +538,10 @@ $.fn.shape = function(parameters) {
left: function() { left: function() {
var var
box = { box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( $activeSide.outerWidth(true) - $nextSide.outerWidth(true) ) / 2),
depth : { depth : {
active : ($nextSide.outerWidth() / 2),
next : ($activeSide.outerWidth() / 2)
active : ($nextSide.outerWidth(true) / 2),
next : ($activeSide.outerWidth(true) / 2)
} }
} }
; ;
@ -549,10 +564,10 @@ $.fn.shape = function(parameters) {
right: function() { right: function() {
var var
box = { box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( $activeSide.outerWidth(true) - $nextSide.outerWidth(true) ) / 2),
depth : { depth : {
active : ($nextSide.outerWidth() / 2),
next : ($activeSide.outerWidth() / 2)
active : ($nextSide.outerWidth(true) / 2),
next : ($activeSide.outerWidth(true) / 2)
} }
} }
; ;
@ -575,10 +590,10 @@ $.fn.shape = function(parameters) {
behind: function() { behind: function() {
var var
box = { box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( $activeSide.outerWidth(true) - $nextSide.outerWidth(true) ) / 2),
depth : { depth : {
active : ($nextSide.outerWidth() / 2),
next : ($activeSide.outerWidth() / 2)
active : ($nextSide.outerWidth(true) / 2),
next : ($activeSide.outerWidth(true) / 2)
} }
} }
; ;

4
src/definitions/modules/shape.less
View File

@ -28,6 +28,7 @@
position: relative; position: relative;
display: @display; display: @display;
perspective: @perspective; perspective: @perspective;
transition: @transition;
} }
.ui.shape .sides { .ui.shape .sides {
@ -128,9 +129,6 @@
CSS CSS
---------------*/ ---------------*/
.ui.shape.animating {
transition: @transition;
}
.ui.shape.animating .sides { .ui.shape.animating .sides {
position: absolute; position: absolute;
} }

7
src/themes/default/modules/shape.variables
View File

@ -13,7 +13,12 @@
@hiddenSideOpacity: 0.4; @hiddenSideOpacity: 0.4;
@animatingZIndex: 100; @animatingZIndex: 100;
@transition: all @duration @easing;
@transition:
transform @duration @easing,
left @duration @easing,
width @duration @easing,
height @duration @easing,
;
@sideTransition: opacity @duration @easing; @sideTransition: opacity @duration @easing;
@backfaceVisibility: hidden; @backfaceVisibility: hidden;

Write Preview
Loading…
Cancel
Save