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
Split 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() {
var
$clone = $module.clone().addClass(className.loading),
@ -227,12 +241,13 @@ $.fn.shape = function(parameters) {
: $clone.find(selector.side).first(),
newSize = {}
;
module.set.currentStageSize();
$activeSide.removeClass(className.active);
$nextSide.addClass(className.active);
$clone.insertAfter($module);
newSize = {
width : $nextSide.outerWidth(),
height : $nextSide.outerHeight()
width : $nextSide.outerWidth(true),
height : $nextSide.outerHeight(true)
};
$clone.remove();
$module
@ -371,8 +386,8 @@ $.fn.shape = function(parameters) {
up: function() {
var
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 {
@ -383,8 +398,8 @@ $.fn.shape = function(parameters) {
down: function() {
var
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 {
@ -395,8 +410,8 @@ $.fn.shape = function(parameters) {
left: function() {
var
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 {
@ -407,8 +422,8 @@ $.fn.shape = function(parameters) {
right: function() {
var
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 {
@ -419,7 +434,7 @@ $.fn.shape = function(parameters) {
over: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
}
;
return {
@ -430,7 +445,7 @@ $.fn.shape = function(parameters) {
back: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
}
;
return {
@ -471,10 +486,10 @@ $.fn.shape = function(parameters) {
above: function() {
var
box = {
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
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() {
var
box = {
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
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() {
var
box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( $activeSide.outerWidth(true) - $nextSide.outerWidth(true) ) / 2),
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() {
var
box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( $activeSide.outerWidth(true) - $nextSide.outerWidth(true) ) / 2),
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() {
var
box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( $activeSide.outerWidth(true) - $nextSide.outerWidth(true) ) / 2),
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;
display: @display;
perspective: @perspective;
transition: @transition;
}
.ui.shape .sides {
@ -128,9 +129,6 @@
CSS
---------------*/
.ui.shape.animating {
transition: @transition;
}
.ui.shape.animating .sides {
position: absolute;
}

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

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

Write Preview
Loading…
Cancel
Save