forked from mirror/gitea
Remove fomantic transition module (#26469)
Removes all dropdown and dimmer animations. Works everywhere as far as I can tell, but need to give this thorough testing. Removes around 70kb JS/CSS. Note, I'm not 100% sure regarding the various callbacks, those will need more investigation, but it appears to work nonetheless. Fixes: https://github.com/go-gitea/gitea/issues/15709
This commit is contained in:
silverwind
parent
3b129aaa80
commit
376c0e25f7
GPG Key ID:
4AEE18F83AFDEB23
@ -225,7 +225,7 @@
|
||||
--color-button: #fafafa;
|
||||
--color-code-bg: #ffffff;
|
||||
--color-code-sidebar-bg: #f5f5f5;
|
||||
--color-shadow: #00000030;
|
||||
--color-shadow: #00000026;
|
||||
--color-secondary-bg: #f4f4f4;
|
||||
--color-expand-button: #d8efff;
|
||||
--color-placeholder-text: #aaa;
|
||||
@ -248,6 +248,7 @@
|
||||
--color-accent: var(--color-primary-light-1);
|
||||
--color-small-accent: var(--color-primary-light-6);
|
||||
--color-active-line: #fffbdd;
|
||||
--color-overlay-backdrop: #080808c0;
|
||||
accent-color: var(--color-accent);
|
||||
color-scheme: light;
|
||||
}
|
||||
@ -705,6 +706,16 @@ a.label,
|
||||
background: var(--color-active) !important;
|
||||
}
|
||||
|
||||
/* styles from removed fomantic transition module */
|
||||
.hidden.transition {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
.visible.transition {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.ui.message {
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
@ -796,7 +807,7 @@ a.label,
|
||||
.ui.selection.active.dropdown:hover,
|
||||
.ui.selection.active.dropdown .menu,
|
||||
.ui.selection.active.dropdown:hover .menu {
|
||||
border-color: var(--color-primary-light-2);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu {
|
||||
@ -1186,6 +1197,20 @@ img.ui.avatar,
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu,
|
||||
.ui.upward.dropdown > .menu,
|
||||
.ui.menu .dropdown.item .menu,
|
||||
.ui.selection.active.dropdown .menu,
|
||||
.ui.upward.selection.dropdown .menu,
|
||||
.ui.selection.active.dropdown:hover .menu,
|
||||
.ui.upward.active.selection.dropdown:hover .menu {
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.dimmer {
|
||||
background: var(--color-overlay-backdrop);
|
||||
}
|
||||
|
||||
/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */
|
||||
/* This fixes the commit graph button on the commits page */
|
||||
/* modal svg icons, copied from fomantic except width and height */
|
||||
|
||||
@ -105,3 +105,9 @@ code.language-math.is-loading::after {
|
||||
.pulse {
|
||||
animation: pulse 2s linear;
|
||||
}
|
||||
|
||||
.ui.modal {
|
||||
animation-name: fadein;
|
||||
animation-duration: 300ms;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@ -233,6 +233,7 @@
|
||||
--color-accent: var(--color-primary-light-1);
|
||||
--color-small-accent: var(--color-primary-light-5);
|
||||
--color-active-line: #534d1b;
|
||||
--color-overlay-backdrop: #080808c0;
|
||||
accent-color: var(--color-accent);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@ -20973,2067 +20973,4 @@ span.ui.massive.text {
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
/*!
|
||||
* # Fomantic-UI - Transition
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Transitions
|
||||
*******************************/
|
||||
|
||||
.transition {
|
||||
-webkit-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
-webkit-animation-duration: 300ms;
|
||||
animation-duration: 300ms;
|
||||
-webkit-animation-timing-function: ease;
|
||||
animation-timing-function: ease;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/* Animating */
|
||||
|
||||
.animating.transition {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
|
||||
.loading.transition {
|
||||
position: absolute;
|
||||
top: -99999px;
|
||||
left: -99999px;
|
||||
}
|
||||
|
||||
/* Hidden */
|
||||
|
||||
.hidden.transition {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Visible */
|
||||
|
||||
.visible.transition {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
/* backface-visibility: @backfaceVisibility;
|
||||
transform: @use3DAcceleration;*/
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
|
||||
.disabled.transition {
|
||||
-webkit-animation-play-state: paused;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.looping.transition {
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
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
|
||||
---------------*/
|
||||
|
||||
.transition.browse {
|
||||
-webkit-animation-duration: 500ms;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
.transition.browse.in {
|
||||
-webkit-animation-name: browseIn;
|
||||
animation-name: browseIn;
|
||||
}
|
||||
|
||||
.transition.browse.out,
|
||||
.transition.browse.left.out {
|
||||
-webkit-animation-name: browseOutLeft;
|
||||
animation-name: browseOutLeft;
|
||||
}
|
||||
|
||||
.transition.browse.right.out {
|
||||
-webkit-animation-name: browseOutRight;
|
||||
animation-name: browseOutRight;
|
||||
}
|
||||
|
||||
/* In */
|
||||
|
||||
@-webkit-keyframes browseIn {
|
||||
0% {
|
||||
transform: scale(0.8) translateZ(0px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: scale(0.8) translateZ(0px);
|
||||
z-index: -1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(1.05) translateZ(0px);
|
||||
opacity: 1;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) translateZ(0px);
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes browseIn {
|
||||
0% {
|
||||
transform: scale(0.8) translateZ(0px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: scale(0.8) translateZ(0px);
|
||||
z-index: -1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(1.05) translateZ(0px);
|
||||
opacity: 1;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) translateZ(0px);
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
|
||||
/* Out */
|
||||
|
||||
@-webkit-keyframes browseOutLeft {
|
||||
0% {
|
||||
z-index: 999;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
z-index: -1;
|
||||
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
z-index: -1;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes browseOutLeft {
|
||||
0% {
|
||||
z-index: 999;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
z-index: -1;
|
||||
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
z-index: -1;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes browseOutRight {
|
||||
0% {
|
||||
z-index: 999;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
z-index: 1;
|
||||
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
z-index: 1;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes browseOutRight {
|
||||
0% {
|
||||
z-index: 999;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
z-index: 1;
|
||||
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
z-index: 1;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Drop
|
||||
---------------*/
|
||||
|
||||
.drop.transition {
|
||||
transform-origin: top center;
|
||||
-webkit-animation-duration: 400ms;
|
||||
animation-duration: 400ms;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
|
||||
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
|
||||
}
|
||||
|
||||
.drop.transition.in {
|
||||
-webkit-animation-name: dropIn;
|
||||
animation-name: dropIn;
|
||||
}
|
||||
|
||||
.drop.transition.out {
|
||||
-webkit-animation-name: dropOut;
|
||||
animation-name: dropOut;
|
||||
}
|
||||
|
||||
/* Drop */
|
||||
|
||||
@-webkit-keyframes dropIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes dropOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Fade
|
||||
---------------*/
|
||||
|
||||
.transition.fade.in {
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
.transition[class*="fade up"].in {
|
||||
-webkit-animation-name: fadeInUp;
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
.transition[class*="fade down"].in {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
.transition[class*="fade left"].in {
|
||||
-webkit-animation-name: fadeInLeft;
|
||||
animation-name: fadeInLeft;
|
||||
}
|
||||
|
||||
.transition[class*="fade right"].in {
|
||||
-webkit-animation-name: fadeInRight;
|
||||
animation-name: fadeInRight;
|
||||
}
|
||||
|
||||
.transition.fade.out {
|
||||
-webkit-animation-name: fadeOut;
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
|
||||
.transition[class*="fade up"].out {
|
||||
-webkit-animation-name: fadeOutUp;
|
||||
animation-name: fadeOutUp;
|
||||
}
|
||||
|
||||
.transition[class*="fade down"].out {
|
||||
-webkit-animation-name: fadeOutDown;
|
||||
animation-name: fadeOutDown;
|
||||
}
|
||||
|
||||
.transition[class*="fade left"].out {
|
||||
-webkit-animation-name: fadeOutLeft;
|
||||
animation-name: fadeOutLeft;
|
||||
}
|
||||
|
||||
.transition[class*="fade right"].out {
|
||||
-webkit-animation-name: fadeOutRight;
|
||||
animation-name: fadeOutRight;
|
||||
}
|
||||
|
||||
/* In */
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Out */
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOutUp {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutUp {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOutDown {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-5%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutDown {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-5%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOutLeft {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(5%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutLeft {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(5%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOutRight {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-5%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutRight {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-5%);
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Flips
|
||||
---------------*/
|
||||
|
||||
.flip.transition.in,
|
||||
.flip.transition.out {
|
||||
-webkit-animation-duration: 600ms;
|
||||
animation-duration: 600ms;
|
||||
}
|
||||
|
||||
.horizontal.flip.transition.in {
|
||||
-webkit-animation-name: horizontalFlipIn;
|
||||
animation-name: horizontalFlipIn;
|
||||
}
|
||||
|
||||
.horizontal.flip.transition.out {
|
||||
-webkit-animation-name: horizontalFlipOut;
|
||||
animation-name: horizontalFlipOut;
|
||||
}
|
||||
|
||||
.vertical.flip.transition.in {
|
||||
-webkit-animation-name: verticalFlipIn;
|
||||
animation-name: verticalFlipIn;
|
||||
}
|
||||
|
||||
.vertical.flip.transition.out {
|
||||
-webkit-animation-name: verticalFlipOut;
|
||||
animation-name: verticalFlipOut;
|
||||
}
|
||||
|
||||
/* In */
|
||||
|
||||
@-webkit-keyframes horizontalFlipIn {
|
||||
0% {
|
||||
transform: perspective(2000px) rotateY(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(2000px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes horizontalFlipIn {
|
||||
0% {
|
||||
transform: perspective(2000px) rotateY(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(2000px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes verticalFlipIn {
|
||||
0% {
|
||||
transform: perspective(2000px) rotateX(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(2000px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes verticalFlipIn {
|
||||
0% {
|
||||
transform: perspective(2000px) rotateX(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(2000px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Out */
|
||||
|
||||
@-webkit-keyframes horizontalFlipOut {
|
||||
0% {
|
||||
transform: perspective(2000px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(2000px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes horizontalFlipOut {
|
||||
0% {
|
||||
transform: perspective(2000px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(2000px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes verticalFlipOut {
|
||||
0% {
|
||||
transform: perspective(2000px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(2000px) rotateX(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes verticalFlipOut {
|
||||
0% {
|
||||
transform: perspective(2000px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(2000px) rotateX(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Scale
|
||||
---------------*/
|
||||
|
||||
.scale.transition.in {
|
||||
-webkit-animation-name: scaleIn;
|
||||
animation-name: scaleIn;
|
||||
}
|
||||
|
||||
.scale.transition.out {
|
||||
-webkit-animation-name: scaleOut;
|
||||
animation-name: scaleOut;
|
||||
}
|
||||
|
||||
@-webkit-keyframes scaleIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Out */
|
||||
|
||||
@-webkit-keyframes scaleOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Fly
|
||||
---------------*/
|
||||
|
||||
/* Inward */
|
||||
|
||||
.transition.fly {
|
||||
-webkit-animation-duration: 0.6s;
|
||||
animation-duration: 0.6s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
.transition.fly.in {
|
||||
-webkit-animation-name: flyIn;
|
||||
animation-name: flyIn;
|
||||
}
|
||||
|
||||
.transition[class*="fly up"].in {
|
||||
-webkit-animation-name: flyInUp;
|
||||
animation-name: flyInUp;
|
||||
}
|
||||
|
||||
.transition[class*="fly down"].in {
|
||||
-webkit-animation-name: flyInDown;
|
||||
animation-name: flyInDown;
|
||||
}
|
||||
|
||||
.transition[class*="fly left"].in {
|
||||
-webkit-animation-name: flyInLeft;
|
||||
animation-name: flyInLeft;
|
||||
}
|
||||
|
||||
.transition[class*="fly right"].in {
|
||||
-webkit-animation-name: flyInRight;
|
||||
animation-name: flyInRight;
|
||||
}
|
||||
|
||||
/* Outward */
|
||||
|
||||
.transition.fly.out {
|
||||
-webkit-animation-name: flyOut;
|
||||
animation-name: flyOut;
|
||||
}
|
||||
|
||||
.transition[class*="fly up"].out {
|
||||
-webkit-animation-name: flyOutUp;
|
||||
animation-name: flyOutUp;
|
||||
}
|
||||
|
||||
.transition[class*="fly down"].out {
|
||||
-webkit-animation-name: flyOutDown;
|
||||
animation-name: flyOutDown;
|
||||
}
|
||||
|
||||
.transition[class*="fly left"].out {
|
||||
-webkit-animation-name: flyOutLeft;
|
||||
animation-name: flyOutLeft;
|
||||
}
|
||||
|
||||
.transition[class*="fly right"].out {
|
||||
-webkit-animation-name: flyOutRight;
|
||||
animation-name: flyOutRight;
|
||||
}
|
||||
|
||||
/* In */
|
||||
|
||||
@-webkit-keyframes flyIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.03, 1.03, 1.03);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale3d(0.97, 0.97, 0.97);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.03, 1.03, 1.03);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale3d(0.97, 0.97, 0.97);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes flyInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 1500px, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0, -5px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 1500px, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0, -5px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes flyInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -1500px, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 25px, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0, 5px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -1500px, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 25px, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0, 5px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes flyInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(1500px, 0, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-25px, 0, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(-5px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(1500px, 0, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-25px, 0, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(-5px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes flyInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-1500px, 0, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(25px, 0, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(5px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-1500px, 0, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(25px, 0, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(5px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Out */
|
||||
|
||||
@-webkit-keyframes flyOut {
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
||||
50%, 55% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyOut {
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
||||
50%, 55% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes flyOutUp {
|
||||
20% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
|
||||
40%, 45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyOutUp {
|
||||
20% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
|
||||
40%, 45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes flyOutDown {
|
||||
20% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
40%, 45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyOutDown {
|
||||
20% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
40%, 45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes flyOutRight {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(20px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyOutRight {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(20px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes flyOutLeft {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-20px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyOutLeft {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-20px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Slide
|
||||
---------------*/
|
||||
|
||||
.transition.slide.in,
|
||||
.transition[class*="slide down"].in {
|
||||
-webkit-animation-name: slideInY;
|
||||
animation-name: slideInY;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.transition[class*="slide up"].in {
|
||||
-webkit-animation-name: slideInY;
|
||||
animation-name: slideInY;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.transition[class*="slide left"].in {
|
||||
-webkit-animation-name: slideInX;
|
||||
animation-name: slideInX;
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.transition[class*="slide right"].in {
|
||||
-webkit-animation-name: slideInX;
|
||||
animation-name: slideInX;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.transition.slide.out,
|
||||
.transition[class*="slide down"].out {
|
||||
-webkit-animation-name: slideOutY;
|
||||
animation-name: slideOutY;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.transition[class*="slide up"].out {
|
||||
-webkit-animation-name: slideOutY;
|
||||
animation-name: slideOutY;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.transition[class*="slide left"].out {
|
||||
-webkit-animation-name: slideOutX;
|
||||
animation-name: slideOutX;
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.transition[class*="slide right"].out {
|
||||
-webkit-animation-name: slideOutX;
|
||||
animation-name: slideOutX;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
/* In */
|
||||
|
||||
@-webkit-keyframes slideInY {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInY {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideInX {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInX {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Out */
|
||||
|
||||
@-webkit-keyframes slideOutY {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutY {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideOutX {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutX {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Swing
|
||||
---------------*/
|
||||
|
||||
.transition.swing {
|
||||
-webkit-animation-duration: 800ms;
|
||||
animation-duration: 800ms;
|
||||
}
|
||||
|
||||
.transition[class*="swing down"].in {
|
||||
-webkit-animation-name: swingInX;
|
||||
animation-name: swingInX;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.transition[class*="swing up"].in {
|
||||
-webkit-animation-name: swingInX;
|
||||
animation-name: swingInX;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.transition[class*="swing left"].in {
|
||||
-webkit-animation-name: swingInY;
|
||||
animation-name: swingInY;
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.transition[class*="swing right"].in {
|
||||
-webkit-animation-name: swingInY;
|
||||
animation-name: swingInY;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.transition.swing.out,
|
||||
.transition[class*="swing down"].out {
|
||||
-webkit-animation-name: swingOutX;
|
||||
animation-name: swingOutX;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.transition[class*="swing up"].out {
|
||||
-webkit-animation-name: swingOutX;
|
||||
animation-name: swingOutX;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.transition[class*="swing left"].out {
|
||||
-webkit-animation-name: swingOutY;
|
||||
animation-name: swingOutY;
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.transition[class*="swing right"].out {
|
||||
-webkit-animation-name: swingOutY;
|
||||
animation-name: swingOutY;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
/* In */
|
||||
|
||||
@-webkit-keyframes swingInX {
|
||||
0% {
|
||||
transform: perspective(1000px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(1000px) rotateX(-30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(1000px) rotateX(15deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(1000px) rotateX(-7.5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(1000px) rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swingInX {
|
||||
0% {
|
||||
transform: perspective(1000px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(1000px) rotateX(-30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(1000px) rotateX(15deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(1000px) rotateX(-7.5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(1000px) rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes swingInY {
|
||||
0% {
|
||||
transform: perspective(1000px) rotateY(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(1000px) rotateY(30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(1000px) rotateY(-17.5deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(1000px) rotateY(7.5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(1000px) rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swingInY {
|
||||
0% {
|
||||
transform: perspective(1000px) rotateY(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(1000px) rotateY(30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(1000px) rotateY(-17.5deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(1000px) rotateY(7.5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(1000px) rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Out */
|
||||
|
||||
@-webkit-keyframes swingOutX {
|
||||
0% {
|
||||
transform: perspective(1000px) rotateX(0deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(1000px) rotateX(-7.5deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(1000px) rotateX(17.5deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(1000px) rotateX(-30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(1000px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swingOutX {
|
||||
0% {
|
||||
transform: perspective(1000px) rotateX(0deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(1000px) rotateX(-7.5deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(1000px) rotateX(17.5deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(1000px) rotateX(-30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(1000px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes swingOutY {
|
||||
0% {
|
||||
transform: perspective(1000px) rotateY(0deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(1000px) rotateY(7.5deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(1000px) rotateY(-10deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(1000px) rotateY(30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(1000px) rotateY(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swingOutY {
|
||||
0% {
|
||||
transform: perspective(1000px) rotateY(0deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(1000px) rotateY(7.5deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(1000px) rotateY(-10deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(1000px) rotateY(30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(1000px) rotateY(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Zoom
|
||||
---------------*/
|
||||
|
||||
.transition.zoom.in {
|
||||
-webkit-animation-name: zoomIn;
|
||||
animation-name: zoomIn;
|
||||
}
|
||||
|
||||
.transition.zoom.out {
|
||||
-webkit-animation-name: zoomOut;
|
||||
animation-name: zoomOut;
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoomIn {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomIn {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoomOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Static Animations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Emphasis
|
||||
---------------*/
|
||||
|
||||
.flash.transition {
|
||||
-webkit-animation-duration: 750ms;
|
||||
animation-duration: 750ms;
|
||||
-webkit-animation-name: flash;
|
||||
animation-name: flash;
|
||||
}
|
||||
|
||||
.shake.transition {
|
||||
-webkit-animation-duration: 750ms;
|
||||
animation-duration: 750ms;
|
||||
-webkit-animation-name: shake;
|
||||
animation-name: shake;
|
||||
}
|
||||
|
||||
.bounce.transition {
|
||||
-webkit-animation-duration: 750ms;
|
||||
animation-duration: 750ms;
|
||||
-webkit-animation-name: bounce;
|
||||
animation-name: bounce;
|
||||
}
|
||||
|
||||
.tada.transition {
|
||||
-webkit-animation-duration: 750ms;
|
||||
animation-duration: 750ms;
|
||||
-webkit-animation-name: tada;
|
||||
animation-name: tada;
|
||||
}
|
||||
|
||||
.pulse.transition {
|
||||
-webkit-animation-duration: 500ms;
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-name: pulse;
|
||||
animation-name: pulse;
|
||||
}
|
||||
|
||||
.jiggle.transition {
|
||||
-webkit-animation-duration: 750ms;
|
||||
animation-duration: 750ms;
|
||||
-webkit-animation-name: jiggle;
|
||||
animation-name: jiggle;
|
||||
}
|
||||
|
||||
.transition.glow {
|
||||
-webkit-animation-duration: 2000ms;
|
||||
animation-duration: 2000ms;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
|
||||
.transition.glow {
|
||||
-webkit-animation-name: glow;
|
||||
animation-name: glow;
|
||||
}
|
||||
|
||||
/* Flash */
|
||||
|
||||
@-webkit-keyframes flash {
|
||||
0%, 50%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25%, 75% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0%, 50%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25%, 75% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Shake */
|
||||
|
||||
@-webkit-keyframes shake {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Bounce */
|
||||
|
||||
@-webkit-keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tada */
|
||||
|
||||
@-webkit-keyframes tada {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
10%, 20% {
|
||||
transform: scale(0.9) rotate(-3deg);
|
||||
}
|
||||
|
||||
30%, 50%, 70%, 90% {
|
||||
transform: scale(1.1) rotate(3deg);
|
||||
}
|
||||
|
||||
40%, 60%, 80% {
|
||||
transform: scale(1.1) rotate(-3deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
10%, 20% {
|
||||
transform: scale(0.9) rotate(-3deg);
|
||||
}
|
||||
|
||||
30%, 50%, 70%, 90% {
|
||||
transform: scale(1.1) rotate(3deg);
|
||||
}
|
||||
|
||||
40%, 60%, 80% {
|
||||
transform: scale(1.1) rotate(-3deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulse */
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Jiggle */
|
||||
|
||||
@-webkit-keyframes jiggle {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: scale3d(1.25, 0.75, 1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(0.75, 1.25, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.15, 0.85, 1);
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: scale3d(0.95, 1.05, 1);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale3d(1.05, 0.95, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jiggle {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: scale3d(1.25, 0.75, 1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(0.75, 1.25, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.15, 0.85, 1);
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: scale3d(0.95, 1.05, 1);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale3d(1.05, 0.95, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Glow */
|
||||
|
||||
@-webkit-keyframes glow {
|
||||
0% {
|
||||
background-color: #FCFCFD;
|
||||
}
|
||||
|
||||
30% {
|
||||
background-color: #FFF6CD;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #FCFCFD;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
background-color: #FCFCFD;
|
||||
}
|
||||
|
||||
30% {
|
||||
background-color: #FFF6CD;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #FCFCFD;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
@ -13360,1114 +13360,4 @@ $.fn.tab.settings = {
|
||||
|
||||
};
|
||||
|
||||
})( jQuery, window, document );
|
||||
|
||||
/*!
|
||||
* # Fomantic-UI - Transition
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
'use strict';
|
||||
|
||||
$.isFunction = $.isFunction || function(obj) {
|
||||
return typeof obj === "function" && typeof obj.nodeType !== "number";
|
||||
};
|
||||
|
||||
window = (typeof window != 'undefined' && window.Math == Math)
|
||||
? window
|
||||
: (typeof self != 'undefined' && self.Math == Math)
|
||||
? self
|
||||
: Function('return this')()
|
||||
;
|
||||
|
||||
$.fn.transition = function() {
|
||||
var
|
||||
$allModules = $(this),
|
||||
moduleSelector = $allModules.selector || '',
|
||||
|
||||
time = new Date().getTime(),
|
||||
performance = [],
|
||||
|
||||
moduleArguments = arguments,
|
||||
query = moduleArguments[0],
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
methodInvoked = (typeof query === 'string'),
|
||||
|
||||
returnedValue
|
||||
;
|
||||
$allModules
|
||||
.each(function(index) {
|
||||
var
|
||||
$module = $(this),
|
||||
element = this,
|
||||
|
||||
// set at run time
|
||||
settings,
|
||||
instance,
|
||||
|
||||
error,
|
||||
className,
|
||||
metadata,
|
||||
animationEnd,
|
||||
|
||||
moduleNamespace,
|
||||
eventNamespace,
|
||||
module
|
||||
;
|
||||
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
|
||||
// get full settings
|
||||
settings = module.get.settings.apply(element, moduleArguments);
|
||||
|
||||
// shorthand
|
||||
className = settings.className;
|
||||
error = settings.error;
|
||||
metadata = settings.metadata;
|
||||
|
||||
// define namespace
|
||||
eventNamespace = '.' + settings.namespace;
|
||||
moduleNamespace = 'module-' + settings.namespace;
|
||||
instance = $module.data(moduleNamespace) || module;
|
||||
|
||||
// get vendor specific events
|
||||
animationEnd = module.get.animationEndEvent();
|
||||
|
||||
if(methodInvoked) {
|
||||
methodInvoked = module.invoke(query);
|
||||
}
|
||||
|
||||
// method not invoked, lets run an animation
|
||||
if(methodInvoked === false) {
|
||||
module.verbose('Converted arguments into settings object', settings);
|
||||
if(settings.interval) {
|
||||
module.delay(settings.animate);
|
||||
}
|
||||
else {
|
||||
module.animate();
|
||||
}
|
||||
module.instantiate();
|
||||
}
|
||||
},
|
||||
|
||||
instantiate: function() {
|
||||
module.verbose('Storing instance of module', module);
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, instance)
|
||||
;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying previous module for', element);
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
module.verbose('Refreshing display type on next animation');
|
||||
delete module.displayType;
|
||||
},
|
||||
|
||||
forceRepaint: function() {
|
||||
module.verbose('Forcing element repaint');
|
||||
var
|
||||
$parentElement = $module.parent(),
|
||||
$nextElement = $module.next()
|
||||
;
|
||||
if($nextElement.length === 0) {
|
||||
$module.detach().appendTo($parentElement);
|
||||
}
|
||||
else {
|
||||
$module.detach().insertBefore($nextElement);
|
||||
}
|
||||
},
|
||||
|
||||
repaint: function() {
|
||||
module.verbose('Repainting element');
|
||||
var
|
||||
fakeAssignment = element.offsetWidth
|
||||
;
|
||||
},
|
||||
|
||||
delay: function(interval) {
|
||||
var
|
||||
direction = module.get.animationDirection(),
|
||||
shouldReverse,
|
||||
delay
|
||||
;
|
||||
if(!direction) {
|
||||
direction = module.can.transition()
|
||||
? module.get.direction()
|
||||
: 'static'
|
||||
;
|
||||
}
|
||||
interval = (interval !== undefined)
|
||||
? interval
|
||||
: settings.interval
|
||||
;
|
||||
shouldReverse = (settings.reverse == 'auto' && direction == className.outward);
|
||||
delay = (shouldReverse || settings.reverse == true)
|
||||
? ($allModules.length - index) * settings.interval
|
||||
: index * settings.interval
|
||||
;
|
||||
module.debug('Delaying animation by', delay);
|
||||
setTimeout(module.animate, delay);
|
||||
},
|
||||
|
||||
animate: function(overrideSettings) {
|
||||
settings = overrideSettings || settings;
|
||||
if(!module.is.supported()) {
|
||||
module.error(error.support);
|
||||
return false;
|
||||
}
|
||||
module.debug('Preparing animation', settings.animation);
|
||||
if(module.is.animating()) {
|
||||
if(settings.queue) {
|
||||
if(!settings.allowRepeats && module.has.direction() && module.is.occurring() && module.queuing !== true) {
|
||||
module.debug('Animation is currently occurring, preventing queueing same animation', settings.animation);
|
||||
}
|
||||
else {
|
||||
module.queue(settings.animation);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
else if(!settings.allowRepeats && module.is.occurring()) {
|
||||
module.debug('Animation is already occurring, will not execute repeated animation', settings.animation);
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
module.debug('New animation started, completing previous early', settings.animation);
|
||||
instance.complete();
|
||||
}
|
||||
}
|
||||
if( module.can.animate() ) {
|
||||
module.set.animating(settings.animation);
|
||||
}
|
||||
else {
|
||||
module.error(error.noAnimation, settings.animation, element);
|
||||
}
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
module.debug('Resetting animation to beginning conditions');
|
||||
module.remove.animationCallbacks();
|
||||
module.restore.conditions();
|
||||
module.remove.animating();
|
||||
},
|
||||
|
||||
queue: function(animation) {
|
||||
module.debug('Queueing animation of', animation);
|
||||
module.queuing = true;
|
||||
$module
|
||||
.one(animationEnd + '.queue' + eventNamespace, function() {
|
||||
module.queuing = false;
|
||||
module.repaint();
|
||||
module.animate.apply(this, settings);
|
||||
})
|
||||
;
|
||||
},
|
||||
|
||||
complete: function (event) {
|
||||
if(event && event.target === element) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
module.debug('Animation complete', settings.animation);
|
||||
module.remove.completeCallback();
|
||||
module.remove.failSafe();
|
||||
if(!module.is.looping()) {
|
||||
if( module.is.outward() ) {
|
||||
module.verbose('Animation is outward, hiding element');
|
||||
module.restore.conditions();
|
||||
module.hide();
|
||||
}
|
||||
else if( module.is.inward() ) {
|
||||
module.verbose('Animation is outward, showing element');
|
||||
module.restore.conditions();
|
||||
module.show();
|
||||
}
|
||||
else {
|
||||
module.verbose('Static animation completed');
|
||||
module.restore.conditions();
|
||||
settings.onComplete.call(element);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
force: {
|
||||
visible: function() {
|
||||
var
|
||||
style = $module.attr('style'),
|
||||
userStyle = module.get.userStyle(style),
|
||||
displayType = module.get.displayType(),
|
||||
overrideStyle = userStyle + 'display: ' + displayType + ' !important;',
|
||||
inlineDisplay = $module[0].style.display,
|
||||
mustStayHidden = !displayType || (inlineDisplay === 'none' && settings.skipInlineHidden) || $module[0].tagName.match(/(script|link|style)/i)
|
||||
;
|
||||
if (mustStayHidden){
|
||||
module.remove.transition();
|
||||
return false;
|
||||
}
|
||||
module.verbose('Overriding default display to show element', displayType);
|
||||
$module
|
||||
.attr('style', overrideStyle)
|
||||
;
|
||||
return true;
|
||||
},
|
||||
hidden: function() {
|
||||
var
|
||||
style = $module.attr('style'),
|
||||
currentDisplay = $module.css('display'),
|
||||
emptyStyle = (style === undefined || style === '')
|
||||
;
|
||||
if(currentDisplay !== 'none' && !module.is.hidden()) {
|
||||
module.verbose('Overriding default display to hide element');
|
||||
$module
|
||||
.css('display', 'none')
|
||||
;
|
||||
}
|
||||
else if(emptyStyle) {
|
||||
$module
|
||||
.removeAttr('style')
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
has: {
|
||||
direction: function(animation) {
|
||||
var
|
||||
hasDirection = false
|
||||
;
|
||||
animation = animation || settings.animation;
|
||||
if(typeof animation === 'string') {
|
||||
animation = animation.split(' ');
|
||||
$.each(animation, function(index, word){
|
||||
if(word === className.inward || word === className.outward) {
|
||||
hasDirection = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
return hasDirection;
|
||||
},
|
||||
inlineDisplay: function() {
|
||||
var
|
||||
style = $module.attr('style') || ''
|
||||
;
|
||||
return Array.isArray(style.match(/display.*?;/, ''));
|
||||
}
|
||||
},
|
||||
|
||||
set: {
|
||||
animating: function(animation) {
|
||||
// remove previous callbacks
|
||||
module.remove.completeCallback();
|
||||
|
||||
// determine exact animation
|
||||
animation = animation || settings.animation;
|
||||
var animationClass = module.get.animationClass(animation);
|
||||
|
||||
// save animation class in cache to restore class names
|
||||
module.save.animation(animationClass);
|
||||
|
||||
if(module.force.visible()) {
|
||||
module.remove.hidden();
|
||||
module.remove.direction();
|
||||
|
||||
module.start.animation(animationClass);
|
||||
}
|
||||
},
|
||||
duration: function(animationName, duration) {
|
||||
duration = duration || settings.duration;
|
||||
duration = (typeof duration == 'number')
|
||||
? duration + 'ms'
|
||||
: duration
|
||||
;
|
||||
if(duration || duration === 0) {
|
||||
module.verbose('Setting animation duration', duration);
|
||||
$module
|
||||
.css({
|
||||
'animation-duration': duration
|
||||
})
|
||||
;
|
||||
}
|
||||
},
|
||||
direction: function(direction) {
|
||||
direction = direction || module.get.direction();
|
||||
if(direction == className.inward) {
|
||||
module.set.inward();
|
||||
}
|
||||
else {
|
||||
module.set.outward();
|
||||
}
|
||||
},
|
||||
looping: function() {
|
||||
module.debug('Transition set to loop');
|
||||
$module
|
||||
.addClass(className.looping)
|
||||
;
|
||||
},
|
||||
hidden: function() {
|
||||
$module
|
||||
.addClass(className.transition)
|
||||
.addClass(className.hidden)
|
||||
;
|
||||
},
|
||||
inward: function() {
|
||||
module.debug('Setting direction to inward');
|
||||
$module
|
||||
.removeClass(className.outward)
|
||||
.addClass(className.inward)
|
||||
;
|
||||
},
|
||||
outward: function() {
|
||||
module.debug('Setting direction to outward');
|
||||
$module
|
||||
.removeClass(className.inward)
|
||||
.addClass(className.outward)
|
||||
;
|
||||
},
|
||||
visible: function() {
|
||||
$module
|
||||
.addClass(className.transition)
|
||||
.addClass(className.visible)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
start: {
|
||||
animation: function(animationClass) {
|
||||
animationClass = animationClass || module.get.animationClass();
|
||||
module.debug('Starting tween', animationClass);
|
||||
$module
|
||||
.addClass(animationClass)
|
||||
.one(animationEnd + '.complete' + eventNamespace, module.complete)
|
||||
;
|
||||
if(settings.useFailSafe) {
|
||||
module.add.failSafe();
|
||||
}
|
||||
module.set.duration(settings.duration);
|
||||
settings.onStart.call(element);
|
||||
}
|
||||
},
|
||||
|
||||
save: {
|
||||
animation: function(animation) {
|
||||
if(!module.cache) {
|
||||
module.cache = {};
|
||||
}
|
||||
module.cache.animation = animation;
|
||||
},
|
||||
displayType: function(displayType) {
|
||||
if(displayType !== 'none') {
|
||||
$module.data(metadata.displayType, displayType);
|
||||
}
|
||||
},
|
||||
transitionExists: function(animation, exists) {
|
||||
$.fn.transition.exists[animation] = exists;
|
||||
module.verbose('Saving existence of transition', animation, exists);
|
||||
}
|
||||
},
|
||||
|
||||
restore: {
|
||||
conditions: function() {
|
||||
var
|
||||
animation = module.get.currentAnimation()
|
||||
;
|
||||
if(animation) {
|
||||
$module
|
||||
.removeClass(animation)
|
||||
;
|
||||
module.verbose('Removing animation class', module.cache);
|
||||
}
|
||||
module.remove.duration();
|
||||
}
|
||||
},
|
||||
|
||||
add: {
|
||||
failSafe: function() {
|
||||
var
|
||||
duration = module.get.duration()
|
||||
;
|
||||
module.timer = setTimeout(function() {
|
||||
$module.triggerHandler(animationEnd);
|
||||
}, duration + settings.failSafeDelay);
|
||||
module.verbose('Adding fail safe timer', module.timer);
|
||||
}
|
||||
},
|
||||
|
||||
remove: {
|
||||
animating: function() {
|
||||
$module.removeClass(className.animating);
|
||||
},
|
||||
animationCallbacks: function() {
|
||||
module.remove.queueCallback();
|
||||
module.remove.completeCallback();
|
||||
},
|
||||
queueCallback: function() {
|
||||
$module.off('.queue' + eventNamespace);
|
||||
},
|
||||
completeCallback: function() {
|
||||
$module.off('.complete' + eventNamespace);
|
||||
},
|
||||
display: function() {
|
||||
$module.css('display', '');
|
||||
},
|
||||
direction: function() {
|
||||
$module
|
||||
.removeClass(className.inward)
|
||||
.removeClass(className.outward)
|
||||
;
|
||||
},
|
||||
duration: function() {
|
||||
$module
|
||||
.css('animation-duration', '')
|
||||
;
|
||||
},
|
||||
failSafe: function() {
|
||||
module.verbose('Removing fail safe timer', module.timer);
|
||||
if(module.timer) {
|
||||
clearTimeout(module.timer);
|
||||
}
|
||||
},
|
||||
hidden: function() {
|
||||
$module.removeClass(className.hidden);
|
||||
},
|
||||
visible: function() {
|
||||
$module.removeClass(className.visible);
|
||||
},
|
||||
looping: function() {
|
||||
module.debug('Transitions are no longer looping');
|
||||
if( module.is.looping() ) {
|
||||
module.reset();
|
||||
$module
|
||||
.removeClass(className.looping)
|
||||
;
|
||||
}
|
||||
},
|
||||
transition: function() {
|
||||
$module
|
||||
.removeClass(className.transition)
|
||||
.removeClass(className.visible)
|
||||
.removeClass(className.hidden)
|
||||
;
|
||||
}
|
||||
},
|
||||
get: {
|
||||
settings: function(animation, duration, onComplete) {
|
||||
// single settings object
|
||||
if(typeof animation == 'object') {
|
||||
return $.extend(true, {}, $.fn.transition.settings, animation);
|
||||
}
|
||||
// all arguments provided
|
||||
else if(typeof onComplete == 'function') {
|
||||
return $.extend({}, $.fn.transition.settings, {
|
||||
animation : animation,
|
||||
onComplete : onComplete,
|
||||
duration : duration
|
||||
});
|
||||
}
|
||||
// only duration provided
|
||||
else if(typeof duration == 'string' || typeof duration == 'number') {
|
||||
return $.extend({}, $.fn.transition.settings, {
|
||||
animation : animation,
|
||||
duration : duration
|
||||
});
|
||||
}
|
||||
// duration is actually settings object
|
||||
else if(typeof duration == 'object') {
|
||||
return $.extend({}, $.fn.transition.settings, duration, {
|
||||
animation : animation
|
||||
});
|
||||
}
|
||||
// duration is actually callback
|
||||
else if(typeof duration == 'function') {
|
||||
return $.extend({}, $.fn.transition.settings, {
|
||||
animation : animation,
|
||||
onComplete : duration
|
||||
});
|
||||
}
|
||||
// only animation provided
|
||||
else {
|
||||
return $.extend({}, $.fn.transition.settings, {
|
||||
animation : animation
|
||||
});
|
||||
}
|
||||
},
|
||||
animationClass: function(animation) {
|
||||
var
|
||||
animationClass = animation || settings.animation,
|
||||
directionClass = (module.can.transition() && !module.has.direction())
|
||||
? module.get.direction() + ' '
|
||||
: ''
|
||||
;
|
||||
return className.animating + ' '
|
||||
+ className.transition + ' '
|
||||
+ directionClass
|
||||
+ animationClass
|
||||
;
|
||||
},
|
||||
currentAnimation: function() {
|
||||
return (module.cache && module.cache.animation !== undefined)
|
||||
? module.cache.animation
|
||||
: false
|
||||
;
|
||||
},
|
||||
currentDirection: function() {
|
||||
return module.is.inward()
|
||||
? className.inward
|
||||
: className.outward
|
||||
;
|
||||
},
|
||||
direction: function() {
|
||||
return module.is.hidden() || !module.is.visible()
|
||||
? className.inward
|
||||
: className.outward
|
||||
;
|
||||
},
|
||||
animationDirection: function(animation) {
|
||||
var
|
||||
direction
|
||||
;
|
||||
animation = animation || settings.animation;
|
||||
if(typeof animation === 'string') {
|
||||
animation = animation.split(' ');
|
||||
// search animation name for out/in class
|
||||
$.each(animation, function(index, word){
|
||||
if(word === className.inward) {
|
||||
direction = className.inward;
|
||||
}
|
||||
else if(word === className.outward) {
|
||||
direction = className.outward;
|
||||
}
|
||||
});
|
||||
}
|
||||
// return found direction
|
||||
if(direction) {
|
||||
return direction;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
duration: function(duration) {
|
||||
duration = duration || settings.duration;
|
||||
if(duration === false) {
|
||||
duration = $module.css('animation-duration') || 0;
|
||||
}
|
||||
return (typeof duration === 'string')
|
||||
? (duration.indexOf('ms') > -1)
|
||||
? parseFloat(duration)
|
||||
: parseFloat(duration) * 1000
|
||||
: duration
|
||||
;
|
||||
},
|
||||
displayType: function(shouldDetermine) {
|
||||
shouldDetermine = (shouldDetermine !== undefined)
|
||||
? shouldDetermine
|
||||
: true
|
||||
;
|
||||
if(settings.displayType) {
|
||||
return settings.displayType;
|
||||
}
|
||||
if(shouldDetermine && $module.data(metadata.displayType) === undefined) {
|
||||
var currentDisplay = $module.css('display');
|
||||
if(currentDisplay === '' || currentDisplay === 'none'){
|
||||
// create fake element to determine display state
|
||||
module.can.transition(true);
|
||||
} else {
|
||||
module.save.displayType(currentDisplay);
|
||||
}
|
||||
}
|
||||
return $module.data(metadata.displayType);
|
||||
},
|
||||
userStyle: function(style) {
|
||||
style = style || $module.attr('style') || '';
|
||||
return style.replace(/display.*?;/, '');
|
||||
},
|
||||
transitionExists: function(animation) {
|
||||
return $.fn.transition.exists[animation];
|
||||
},
|
||||
animationStartEvent: function() {
|
||||
var
|
||||
element = document.createElement('div'),
|
||||
animations = {
|
||||
'animation' :'animationstart',
|
||||
'OAnimation' :'oAnimationStart',
|
||||
'MozAnimation' :'mozAnimationStart',
|
||||
'WebkitAnimation' :'webkitAnimationStart'
|
||||
},
|
||||
animation
|
||||
;
|
||||
for(animation in animations){
|
||||
if( element.style[animation] !== undefined ){
|
||||
return animations[animation];
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
animationEndEvent: function() {
|
||||
var
|
||||
element = document.createElement('div'),
|
||||
animations = {
|
||||
'animation' :'animationend',
|
||||
'OAnimation' :'oAnimationEnd',
|
||||
'MozAnimation' :'mozAnimationEnd',
|
||||
'WebkitAnimation' :'webkitAnimationEnd'
|
||||
},
|
||||
animation
|
||||
;
|
||||
for(animation in animations){
|
||||
if( element.style[animation] !== undefined ){
|
||||
return animations[animation];
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
can: {
|
||||
transition: function(forced) {
|
||||
var
|
||||
animation = settings.animation,
|
||||
transitionExists = module.get.transitionExists(animation),
|
||||
displayType = module.get.displayType(false),
|
||||
elementClass,
|
||||
tagName,
|
||||
$clone,
|
||||
currentAnimation,
|
||||
inAnimation,
|
||||
directionExists
|
||||
;
|
||||
if( transitionExists === undefined || forced) {
|
||||
module.verbose('Determining whether animation exists');
|
||||
elementClass = $module.attr('class');
|
||||
tagName = $module.prop('tagName');
|
||||
|
||||
$clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
|
||||
currentAnimation = $clone
|
||||
.addClass(animation)
|
||||
.removeClass(className.inward)
|
||||
.removeClass(className.outward)
|
||||
.addClass(className.animating)
|
||||
.addClass(className.transition)
|
||||
.css('animationName')
|
||||
;
|
||||
inAnimation = $clone
|
||||
.addClass(className.inward)
|
||||
.css('animationName')
|
||||
;
|
||||
if(!displayType) {
|
||||
displayType = $clone
|
||||
.attr('class', elementClass)
|
||||
.removeAttr('style')
|
||||
.removeClass(className.hidden)
|
||||
.removeClass(className.visible)
|
||||
.show()
|
||||
.css('display')
|
||||
;
|
||||
module.verbose('Determining final display state', displayType);
|
||||
module.save.displayType(displayType);
|
||||
}
|
||||
|
||||
$clone.remove();
|
||||
if(currentAnimation != inAnimation) {
|
||||
module.debug('Direction exists for animation', animation);
|
||||
directionExists = true;
|
||||
}
|
||||
else if(currentAnimation == 'none' || !currentAnimation) {
|
||||
module.debug('No animation defined in css', animation);
|
||||
return;
|
||||
}
|
||||
else {
|
||||
module.debug('Static animation found', animation, displayType);
|
||||
directionExists = false;
|
||||
}
|
||||
module.save.transitionExists(animation, directionExists);
|
||||
}
|
||||
return (transitionExists !== undefined)
|
||||
? transitionExists
|
||||
: directionExists
|
||||
;
|
||||
},
|
||||
animate: function() {
|
||||
// can transition does not return a value if animation does not exist
|
||||
return (module.can.transition() !== undefined);
|
||||
}
|
||||
},
|
||||
|
||||
is: {
|
||||
animating: function() {
|
||||
return $module.hasClass(className.animating);
|
||||
},
|
||||
inward: function() {
|
||||
return $module.hasClass(className.inward);
|
||||
},
|
||||
outward: function() {
|
||||
return $module.hasClass(className.outward);
|
||||
},
|
||||
looping: function() {
|
||||
return $module.hasClass(className.looping);
|
||||
},
|
||||
occurring: function(animation) {
|
||||
animation = animation || settings.animation;
|
||||
animation = '.' + animation.replace(' ', '.');
|
||||
return ( $module.filter(animation).length > 0 );
|
||||
},
|
||||
visible: function() {
|
||||
return $module.is(':visible');
|
||||
},
|
||||
hidden: function() {
|
||||
return $module.css('visibility') === 'hidden';
|
||||
},
|
||||
supported: function() {
|
||||
return(animationEnd !== false);
|
||||
}
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
module.verbose('Hiding element');
|
||||
if( module.is.animating() ) {
|
||||
module.reset();
|
||||
}
|
||||
element.blur(); // IE will trigger focus change if element is not blurred before hiding
|
||||
module.remove.display();
|
||||
module.remove.visible();
|
||||
if($.isFunction(settings.onBeforeHide)){
|
||||
settings.onBeforeHide.call(element,function(){
|
||||
module.hideNow();
|
||||
});
|
||||
} else {
|
||||
module.hideNow();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
hideNow: function() {
|
||||
module.set.hidden();
|
||||
module.force.hidden();
|
||||
settings.onHide.call(element);
|
||||
settings.onComplete.call(element);
|
||||
// module.repaint();
|
||||
},
|
||||
|
||||
show: function(display) {
|
||||
module.verbose('Showing element', display);
|
||||
if(module.force.visible()) {
|
||||
module.remove.hidden();
|
||||
module.set.visible();
|
||||
settings.onShow.call(element);
|
||||
settings.onComplete.call(element);
|
||||
// module.repaint();
|
||||
}
|
||||
},
|
||||
|
||||
toggle: function() {
|
||||
if( module.is.visible() ) {
|
||||
module.hide();
|
||||
}
|
||||
else {
|
||||
module.show();
|
||||
}
|
||||
},
|
||||
|
||||
stop: function() {
|
||||
module.debug('Stopping current animation');
|
||||
$module.triggerHandler(animationEnd);
|
||||
},
|
||||
|
||||
stopAll: function() {
|
||||
module.debug('Stopping all animation');
|
||||
module.remove.queueCallback();
|
||||
$module.triggerHandler(animationEnd);
|
||||
},
|
||||
|
||||
clear: {
|
||||
queue: function() {
|
||||
module.debug('Clearing animation queue');
|
||||
module.remove.queueCallback();
|
||||
}
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
module.verbose('Starting animation');
|
||||
$module.removeClass(className.disabled);
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
module.debug('Stopping animation');
|
||||
$module.addClass(className.disabled);
|
||||
},
|
||||
|
||||
setting: function(name, value) {
|
||||
module.debug('Changing setting', name, value);
|
||||
if( $.isPlainObject(name) ) {
|
||||
$.extend(true, settings, name);
|
||||
}
|
||||
else if(value !== undefined) {
|
||||
if($.isPlainObject(settings[name])) {
|
||||
$.extend(true, settings[name], value);
|
||||
}
|
||||
else {
|
||||
settings[name] = value;
|
||||
}
|
||||
}
|
||||
else {
|
||||
return settings[name];
|
||||
}
|
||||
},
|
||||
internal: function(name, value) {
|
||||
if( $.isPlainObject(name) ) {
|
||||
$.extend(true, module, name);
|
||||
}
|
||||
else if(value !== undefined) {
|
||||
module[name] = value;
|
||||
}
|
||||
else {
|
||||
return module[name];
|
||||
}
|
||||
},
|
||||
debug: function() {
|
||||
if(!settings.silent && settings.debug) {
|
||||
if(settings.performance) {
|
||||
module.performance.log(arguments);
|
||||
}
|
||||
else {
|
||||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||||
module.debug.apply(console, arguments);
|
||||
}
|
||||
}
|
||||
},
|
||||
verbose: function() {
|
||||
if(!settings.silent && settings.verbose && settings.debug) {
|
||||
if(settings.performance) {
|
||||
module.performance.log(arguments);
|
||||
}
|
||||
else {
|
||||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||||
module.verbose.apply(console, arguments);
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
if(!settings.silent) {
|
||||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||||
module.error.apply(console, arguments);
|
||||
}
|
||||
},
|
||||
performance: {
|
||||
log: function(message) {
|
||||
var
|
||||
currentTime,
|
||||
executionTime,
|
||||
previousTime
|
||||
;
|
||||
if(settings.performance) {
|
||||
currentTime = new Date().getTime();
|
||||
previousTime = time || currentTime;
|
||||
executionTime = currentTime - previousTime;
|
||||
time = currentTime;
|
||||
performance.push({
|
||||
'Name' : message[0],
|
||||
'Arguments' : [].slice.call(message, 1) || '',
|
||||
'Element' : element,
|
||||
'Execution Time' : executionTime
|
||||
});
|
||||
}
|
||||
clearTimeout(module.performance.timer);
|
||||
module.performance.timer = setTimeout(module.performance.display, 500);
|
||||
},
|
||||
display: function() {
|
||||
var
|
||||
title = settings.name + ':',
|
||||
totalTime = 0
|
||||
;
|
||||
time = false;
|
||||
clearTimeout(module.performance.timer);
|
||||
$.each(performance, function(index, data) {
|
||||
totalTime += data['Execution Time'];
|
||||
});
|
||||
title += ' ' + totalTime + 'ms';
|
||||
if(moduleSelector) {
|
||||
title += ' \'' + moduleSelector + '\'';
|
||||
}
|
||||
if($allModules.length > 1) {
|
||||
title += ' ' + '(' + $allModules.length + ')';
|
||||
}
|
||||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||||
console.groupCollapsed(title);
|
||||
if(console.table) {
|
||||
console.table(performance);
|
||||
}
|
||||
else {
|
||||
$.each(performance, function(index, data) {
|
||||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||||
});
|
||||
}
|
||||
console.groupEnd();
|
||||
}
|
||||
performance = [];
|
||||
}
|
||||
},
|
||||
// modified for transition to return invoke success
|
||||
invoke: function(query, passedArguments, context) {
|
||||
var
|
||||
object = instance,
|
||||
maxDepth,
|
||||
found,
|
||||
response
|
||||
;
|
||||
passedArguments = passedArguments || queryArguments;
|
||||
context = element || context;
|
||||
if(typeof query == 'string' && object !== undefined) {
|
||||
query = query.split(/[\. ]/);
|
||||
maxDepth = query.length - 1;
|
||||
$.each(query, function(depth, value) {
|
||||
var camelCaseValue = (depth != maxDepth)
|
||||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||||
: query
|
||||
;
|
||||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||||
object = object[camelCaseValue];
|
||||
}
|
||||
else if( object[camelCaseValue] !== undefined ) {
|
||||
found = object[camelCaseValue];
|
||||
return false;
|
||||
}
|
||||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||||
object = object[value];
|
||||
}
|
||||
else if( object[value] !== undefined ) {
|
||||
found = object[value];
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if ( $.isFunction( found ) ) {
|
||||
response = found.apply(context, passedArguments);
|
||||
}
|
||||
else if(found !== undefined) {
|
||||
response = found;
|
||||
}
|
||||
|
||||
if(Array.isArray(returnedValue)) {
|
||||
returnedValue.push(response);
|
||||
}
|
||||
else if(returnedValue !== undefined) {
|
||||
returnedValue = [returnedValue, response];
|
||||
}
|
||||
else if(response !== undefined) {
|
||||
returnedValue = response;
|
||||
}
|
||||
return (found !== undefined)
|
||||
? found
|
||||
: false
|
||||
;
|
||||
}
|
||||
};
|
||||
module.initialize();
|
||||
})
|
||||
;
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
// Records if CSS transition is available
|
||||
$.fn.transition.exists = {};
|
||||
|
||||
$.fn.transition.settings = {
|
||||
|
||||
// module info
|
||||
name : 'Transition',
|
||||
|
||||
// hide all output from this component regardless of other settings
|
||||
silent : false,
|
||||
|
||||
// debug content outputted to console
|
||||
debug : false,
|
||||
|
||||
// verbose debug output
|
||||
verbose : false,
|
||||
|
||||
// performance data output
|
||||
performance : true,
|
||||
|
||||
// event namespace
|
||||
namespace : 'transition',
|
||||
|
||||
// delay between animations in group
|
||||
interval : 0,
|
||||
|
||||
// whether group animations should be reversed
|
||||
reverse : 'auto',
|
||||
|
||||
// animation callback event
|
||||
onStart : function() {},
|
||||
onComplete : function() {},
|
||||
onShow : function() {},
|
||||
onHide : function() {},
|
||||
|
||||
// whether timeout should be used to ensure callback fires in cases animationend does not
|
||||
useFailSafe : true,
|
||||
|
||||
// delay in ms for fail safe
|
||||
failSafeDelay : 100,
|
||||
|
||||
// whether EXACT animation can occur twice in a row
|
||||
allowRepeats : false,
|
||||
|
||||
// Override final display type on visible
|
||||
displayType : false,
|
||||
|
||||
// animation duration
|
||||
animation : 'fade',
|
||||
duration : false,
|
||||
|
||||
// new animations will occur after previous ones
|
||||
queue : true,
|
||||
|
||||
// whether initially inline hidden objects should be skipped for transition
|
||||
skipInlineHidden: false,
|
||||
|
||||
metadata : {
|
||||
displayType: 'display'
|
||||
},
|
||||
|
||||
className : {
|
||||
animating : 'animating',
|
||||
disabled : 'disabled',
|
||||
hidden : 'hidden',
|
||||
inward : 'in',
|
||||
loading : 'loading',
|
||||
looping : 'looping',
|
||||
outward : 'out',
|
||||
transition : 'transition',
|
||||
visible : 'visible'
|
||||
},
|
||||
|
||||
// possible errors
|
||||
error: {
|
||||
noAnimation : 'Element is no longer attached to DOM. Unable to animate. Use silent setting to surpress this warning in production.',
|
||||
repeated : 'That animation is already occurring, cancelling repeated animation',
|
||||
method : 'The method you called is not defined',
|
||||
support : 'This browser does not support CSS animations'
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
})( jQuery, window, document );
|
||||
|
||||
@ -43,7 +43,6 @@
|
||||
"site",
|
||||
"tab",
|
||||
"table",
|
||||
"text",
|
||||
"transition"
|
||||
"text"
|
||||
]
|
||||
}
|
||||
|
||||
@ -22,6 +22,43 @@ export function initGiteaFomantic() {
|
||||
return escape(text, preserveHTML) + svg('octicon-x', 16, `${className.delete} icon`);
|
||||
};
|
||||
|
||||
// stand-in for removed transition module
|
||||
$.fn.transition = function (arg) {
|
||||
if (arg === 'is supported') return true;
|
||||
if (arg === 'is animating') return false;
|
||||
if (arg === 'is inward') return false;
|
||||
if (arg === 'is outward') return false;
|
||||
if (arg === 'stop all') return;
|
||||
|
||||
const isIn = arg?.animation?.endsWith(' in');
|
||||
const isOut = arg?.animation?.endsWith(' out');
|
||||
|
||||
let ret;
|
||||
if (arg === 'show' || isIn) {
|
||||
arg?.onStart?.(this);
|
||||
ret = this.each((_, el) => {
|
||||
el.classList.remove('hidden');
|
||||
el.classList.add('visible');
|
||||
if (isIn) el.classList.add('transition');
|
||||
if (arg?.displayType) el.style.setProperty('display', arg.displayType, 'important');
|
||||
arg?.onShow?.(this);
|
||||
});
|
||||
arg?.onComplete?.(this);
|
||||
} else if (arg === 'hide' || isOut) {
|
||||
arg?.onStart?.(this);
|
||||
ret = this.each((_, el) => {
|
||||
el.classList.add('hidden');
|
||||
el.classList.remove('visible');
|
||||
// don't remove the transition class because fomantic didn't do it either
|
||||
el.style.removeProperty('display');
|
||||
arg?.onHidden?.(this);
|
||||
});
|
||||
arg?.onComplete?.(this);
|
||||
}
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
initFomanticApiPatch();
|
||||
|
||||
// Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user