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

Fix animations to return to same direction, fix css for consistent formatting

pull/1698/merge
jlukic 10 years ago
parent
b66dfac9ea
commit
018fb8503c
3 changed files with 90 additions and 61 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      RELEASE-NOTES.md
  2. 5
      src/definitions/modules/transition.less
  3. 144
      src/themes/default/modules/transition.overrides

2
RELEASE-NOTES.md
View File

@ -3,6 +3,7 @@
### Version 1.8.0 - January 21, 2015
**Enhancements**
- **Transition** - Transition duration now defaults to what is specified in `css`, to set custom duration you can still pass at run-time as a different value
- **Dropdown** - Keyboard navigation will now allow opening of sub menus with right/left arrow. Enter will open sub-menus on an unselectable category (`allowCategorySelection: false`) as well.
- **Dropdown** - Mutation observers will now observe changed in `<select>` values after initialization, and will automatically update dropdown menu when changed
- **API** - Added new behavior `$.api('abort')` which cancels current request
@ -23,6 +24,7 @@
- **API** - Fixed bug where `$.api('get xhr')` was not correctly returning xhr promise
- *Sticky** - Fixes issue with container size not being set explicitly on rail due to improper method renaming
- **Search** - Search results no longer hide/show when user changes tab or page loses focus
- **Transition** - Fixed bug with animations that contain the strings 'in' or 'out' as part of their names, for example "swing"
### Version 1.7.(1-2) - January 15, 2015

5
src/definitions/modules/transition.less
View File

@ -23,11 +23,6 @@
Transitions
*******************************/
/*
Some transitions adapted from Animate CSS
https://github.com/daneden/animate.css
*/
.transition {
animation-iteration-count: 1;
animation-duration: @transitionDefaultDuration;

144
src/themes/default/modules/transition.overrides
View File

@ -2,6 +2,14 @@
Transitions
*******************************/
/*
Some transitions adapted from Animate CSS
https://github.com/daneden/animate.css
Additional transitions adapted from Glide
by Nick Pettit - https://github.com/nickpettit/glide
*/
/*--------------
Browse
---------------*/
@ -17,6 +25,7 @@
animation-name: browseOutRight;
}
/* In */
@keyframes browseIn {
0% {
transform: scale(0.8) translateZ(0px);
@ -37,6 +46,8 @@
z-index: 999;
}
}
/* Out */
@keyframes browseOutLeft {
0% {
z-index: 999;
@ -76,12 +87,12 @@
/*--------------
Drop
Drop
---------------*/
.drop.transition {
transform-origin: top center;
transition-duration: 0.8s;
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
}
.drop.transition.in {
@ -91,7 +102,7 @@
animation-name: dropOut;
}
/* Scale */
/* Drop */
@keyframes dropIn {
0% {
opacity: 0;
@ -149,6 +160,7 @@
animation-name: fadeOutRight;
}
/* In */
@keyframes fadeIn {
0% {
opacity: 0;
@ -198,6 +210,7 @@
}
}
/* Out */
@keyframes fadeOut {
0% {
opacity: 1;
@ -268,47 +281,46 @@
animation-name: verticalFlipOut;
}
/* Horizontal */
/* In */
@keyframes horizontalFlipIn {
0% {
transform: rotateY(-90deg);
transform: perspective(2000px) rotateY(-90deg);
opacity: 0;
}
100% {
transform: rotateY(0deg);
transform: perspective(2000px) rotateY(0deg);
opacity: 1;
}
}
/* Horizontal */
@keyframes horizontalFlipOut {
@keyframes verticalFlipIn {
0% {
transform: rotateY(0deg);
opacity: 1;
transform: perspective(2000px) rotateX(-90deg);
opacity: 0;
}
100% {
transform: rotateY(90deg);
opacity: 0;
transform: perspective(2000px) rotateX(0deg);
opacity: 1;
}
}
/* Vertical */
@keyframes verticalFlipIn {
/* Out */
@keyframes horizontalFlipOut {
0% {
transform: rotateX(-90deg);
opacity: 0;
transform: perspective(2000px) rotateY(0deg);
opacity: 1;
}
100% {
transform: rotateX(0deg);
opacity: 1;
transform: perspective(2000px) rotateY(90deg);
opacity: 0;
}
}
@keyframes verticalFlipOut {
0% {
transform: rotateX(0deg);
transform: perspective(2000px) rotateX(0deg);
opacity: 1;
}
100% {
transform: rotateX(-90deg);
transform: perspective(2000px) rotateX(-90deg);
opacity: 0;
}
}
@ -324,7 +336,7 @@
animation-name: scaleOut;
}
/* Scale */
/* In */
@keyframes scaleIn {
0% {
opacity: 0;
@ -335,6 +347,8 @@
transform: scale(1);
}
}
/* Out */
@keyframes scaleOut {
0% {
opacity: 1;
@ -350,6 +364,10 @@
Fly
---------------*/
.transition.fly {
animation-duration: 0.6s;
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.transition.fly.in {
animation-name: flyIn;
}
@ -381,10 +399,8 @@
animation-name: flyOutLeft;
}
/* In */
@keyframes flyIn {
0%, 20%, 40%, 60%, 80%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
@ -408,9 +424,6 @@
}
}
@keyframes flyInUp {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, 1500px, 0);
@ -430,9 +443,6 @@
}
}
@keyframes flyInDown {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -1500px, 0);
@ -452,9 +462,6 @@
}
}
@keyframes flyInLeft {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(1500px, 0, 0);
@ -474,9 +481,6 @@
}
}
@keyframes flyInRight {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(-1500px, 0, 0);
@ -496,6 +500,7 @@
}
}
/* Out */
@keyframes flyOut {
20% {
transform: scale3d(.9, .9, .9);
@ -596,6 +601,7 @@
transform-origin: center left;
}
/* In */
@keyframes slideInY {
0% {
opacity: 0;
@ -616,6 +622,8 @@
transform: scaleX(1);
}
}
/* Out */
@keyframes slideOutY {
0% {
opacity: 1;
@ -642,64 +650,61 @@
Swing
---------------*/
.transition.swing,
.transition.swing {
perspective: 1000px;
animation-duration: 0.5s;
transition-timing-function: ease-in;
}
.transition.swing.in,
.transition.swing.in.down {
transform-origin: top center;
transition-timing-function: ease-in;
animation-name: swingInX;
}
.transition.swing.in.up {
transform-origin:bottom center;
transition-timing-function: ease-in;
animation-name: swingInX;
}
.transition.swing.in.left {
transform-origin: center right;
transition-timing-function: ease-in;
animation-name: swingInY;
}
.transition.swing.in.right {
transform-origin: center left;
transition-timing-function: ease-in;
animation-name: swingInY;
}
.transition.swing.out.down,
.transition.swing.out {
transform-origin: top center;
transition-timing-function: ease-in;
animation-name: swingOutX;
animation-name: swingOutDown;
}
.transition.swing.out.up {
transform-origin:bottom center;
transition-timing-function: ease-in;
animation-name: swingOutX;
animation-name: swingOutUp;
}
.transition.swing.out.left {
transform-origin: center right;
transition-timing-function: ease-in;
animation-name: swingOutY;
animation-name: swingOutLeft;
}
.transition.swing.out.right {
transform-origin: center left;
transition-timing-function: ease-in;
animation-name: swingOutY;
animation-name: swingOutRight;
}
/* In */
@keyframes swingInX {
0% {
transform: perspective(1000px) rotateX(-90deg);
transform: perspective(1000px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(1000px) rotateX(20deg);
transform: perspective(1000px) rotateX(-20deg);
}
60% {
transform: perspective(1000px) rotateX(-10deg);
transform: perspective(1000px) rotateX(10deg);
}
80% {
transform: perspective(1000px) rotateX(5deg);
transform: perspective(1000px) rotateX(-5deg);
opacity: 1;
}
100% {
@ -725,7 +730,22 @@
transform: perspective(1000px) rotateY(0deg);
}
}
@keyframes swingOutX {
/* Out */
@keyframes swingOutUp {
0% {
transform: perspective(1000px) rotateX(0deg);
}
30% {
transform: perspective(1000px) rotateX(-20deg);
opacity:1;
}
100% {
transform: perspective(1000px) rotateX(90deg);
opacity: 0;
}
}
@keyframes swingOutDown {
0% {
transform: perspective(1000px) rotateX(0deg);
}
@ -738,7 +758,7 @@
opacity: 0;
}
}
@keyframes swingOutY {
@keyframes swingOutLeft {
0% {
transform: perspective(1000px) rotateY(0deg);
}
@ -751,6 +771,19 @@
opacity: 0;
}
}
@keyframes swingOutRight {
0% {
transform: perspective(1000px) rotateY(0deg);
}
30% {
transform: perspective(1000px) rotateY(-20deg);
opacity:1;
}
100% {
transform: perspective(1000px) rotateY(90deg);
opacity: 0;
}
}
/*******************************
Static Animations
@ -772,7 +805,6 @@
.tada.transition {
animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
.pulse.transition {
animation-name: pulse;
}

Write Preview
Loading…
Cancel
Save