diff --git a/src/modules/transition.less b/src/modules/transition.less index c2b30006b..82b99c27f 100755 --- a/src/modules/transition.less +++ b/src/modules/transition.less @@ -70,15 +70,6 @@ visibility: visible; } - -/* Direction */ -.ui.out.transition { - -webkit-animation-direction: reverse; - -moz-animation-direction: reverse; - -o-animation-direction: reverse; - animation-direction: reverse; -} - /* Disabled */ .ui.disabled.transition { -webkit-animation-play-state: paused; @@ -156,6 +147,12 @@ -o-animation-name: horizontalFlip; animation-name: horizontalFlip; } +.ui.horizontal.flip.transition.out { + -webkit-animation-name: horizontalFlipOut; + -moz-animation-name: horizontalFlipOut; + -o-animation-name: horizontalFlipOut; + animation-name: horizontalFlipOut; +} .ui.vertical.flip.transition.in, .ui.vertical.flip.transition.out { -webkit-animation-name: verticalFlip; @@ -163,18 +160,29 @@ -o-animation-name: verticalFlip; animation-name: verticalFlip; } +.ui.vertical.flip.transition.out { + -webkit-animation-name: verticalFlipOut; + -moz-animation-name: verticalFlipOut; + -o-animation-name: verticalFlipOut; + animation-name: verticalFlipOut; +} /*-------------- Fades ---------------*/ -.ui.fade.transition.in, -.ui.fade.transition.out { +.ui.fade.transition.in { -webkit-animation-name: fade; -moz-animation-name: fade; -o-animation-name: fade; animation-name: fade; } +.ui.fade.transition.out { + -webkit-animation-name: fadeOut; + -moz-animation-name: fadeOut; + -o-animation-name: fadeOut; + animation-name: fadeOut; +} .ui.fade.up.transition.in { -webkit-animation-name: fadeUp; @@ -183,10 +191,10 @@ animation-name: fadeUp; } .ui.fade.up.transition.out { - -webkit-animation-name: fade; - -moz-animation-name: fade; - -o-animation-name: fade; - animation-name: fade; + -webkit-animation-name: fadeUpOut; + -moz-animation-name: fadeUpOut; + -o-animation-name: fadeUpOut; + animation-name: fadeUpOut; } .ui.fade.down.transition.in { @@ -196,31 +204,36 @@ animation-name: fadeDown; } .ui.fade.down.transition.out { - -webkit-animation-name: fade; - -moz-animation-name: fade; - -o-animation-name: fade; - animation-name: fade; + -webkit-animation-name: fadeDownOut; + -moz-animation-name: fadeDownOut; + -o-animation-name: fadeDownOut; + animation-name: fadeDownOut; } /*-------------- Scale ---------------*/ -.ui.scale.transition.in, -.ui.scale.transition.out { +.ui.scale.transition.in { -webkit-animation-name: scale; -moz-animation-name: scale; -o-animation-name: scale; animation-name: scale; } +.ui.scale.transition.out { + -webkit-animation-name: scaleOut; + -moz-animation-name: scaleOut; + -o-animation-name: scaleOut; + animation-name: scaleOut; +} + /*-------------- Slide ---------------*/ -.ui.slide.down.transition.in, -.ui.slide.down.transition.out { +.ui.slide.down.transition.in { -webkit-animation-name: slide; -moz-animation-name: slide; -o-animation-name: slide; @@ -229,8 +242,17 @@ -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } -.ui.slide.up.transition.in, -.ui.slide.up.transition.out { +.ui.slide.down.transition.out { + -webkit-animation-name: slideOut; + -moz-animation-name: slideOut; + -o-animation-name: slideOut; + animation-name: slideOut; + transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + -webkit-transform-origin: 50% 0%; +} + +.ui.slide.up.transition.in { -webkit-animation-name: slide; -moz-animation-name: slide; -o-animation-name: slide; @@ -239,6 +261,16 @@ -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } +.ui.slide.up.transition.out { + -webkit-animation-name: slideOut; + -moz-animation-name: slideOut; + -o-animation-name: slideOut; + animation-name: slideOut; + transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + -webkit-transform-origin: 50% 100%; +} + @-moz-keyframes slide { 0% { @@ -271,6 +303,36 @@ } } +@-moz-keyframes slideOut { + 0% { + opacity: 1; + -moz-transform: scaleY(1); + } + 100% { + opacity: 0; + -moz-transform: scaleY(0); + } +} +@-webkit-keyframes slideOut { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + } + 100% { + opacity: 0; + -webkit-transform: scaleY(0); + } +} +@keyframes slideOut { + 0% { + opacity: 1; + transform: scaleY(1); + } + 100% { + opacity: 0; + transform: scaleY(0); + } +} /******************************* Animations @@ -667,6 +729,46 @@ opacity: 1; } } +@-webkit-keyframes verticalFlipOut { + 0% { + -webkit-transform: rotateX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: rotateX(-90deg); + opacity: 0; + } +} +@-moz-keyframes verticalFlipOut { + 0% { + -moz-transform: rotateX(0deg); + opacity: 1; + } + 100% { + -moz-transform: rotateX(-90deg); + opacity: 0; + } +} +@-o-keyframes verticalFlipOut { + 0% { + -o-transform: rotateX(0deg); + opacity: 1; + } + 100% { + -o-transform: rotateX(-90deg); + opacity: 0; + } +} +@keyframes verticalFlipOut { + 0% { + transform: rotateX(0deg); + opacity: 1; + } + 100% { + transform: rotateX(-90deg); + opacity: 0; + } +} /*-------------- Fades @@ -706,6 +808,39 @@ } } +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@-moz-keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@-o-keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + /* Fade Up */ @-webkit-keyframes fadeUp { 0% { @@ -748,6 +883,47 @@ } } +@-webkit-keyframes fadeUpOut { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + } +} +@-moz-keyframes fadeUpOut { + 0% { + opacity: 1; + -moz-transform: translateY(0); + } + 100% { + opacity: 0; + -moz-transform: translateY(20px); + } +} +@-o-keyframes fadeUpOut { + 0% { + opacity: 1; + -o-transform: translateY(0); + } + 100% { + opacity: 0; + -o-transform: translateY(20px); + } +} +@keyframes fadeUpOut { + 0% { + opacity: 1; + transform: translateY(0); + } + 100% { + opacity: 0; + transform: translateY(20px); + } +} + /* Fade Down */ @-webkit-keyframes fadeDown { 0% { @@ -791,6 +967,47 @@ } +@-webkit-keyframes fadeDownOut { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + } +} +@-moz-keyframes fadeDownOut { + 0% { + opacity: 1; + -moz-transform: translateY(0); + } + 100% { + opacity: 0; + -moz-transform: translateY(-20px); + } +} +@-o-keyframes fadeDownOut { + 0% { + opacity: 1; + -o-transform: translateY(0); + } + 100% { + opacity: 0; + -o-transform: translateY(-20px); + } +} +@keyframes fadeDownOut { + 0% { + opacity: 1; + transform: translateY(0); + } + 100% { + opacity: 0; + transform: translateY(-20px); + } +} + /*-------------- Scale ---------------*/ @@ -835,4 +1052,45 @@ opacity: 1; transform: scale(1); } +} + +@-webkit-keyframes scaleOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0.7); + } +} +@-moz-keyframes scaleOut { + 0% { + opacity: 1; + -moz-transform: scale(1); + } + 100% { + opacity: 0; + -moz-transform: scale(0.7); + } +} +@-o-keyframes scaleOut { + 0% { + opacity: 1; + -o-transform: scale(1); + } + 100% { + opacity: 0; + -o-transform: scale(0.7); + } +} +@keyframes scaleOut { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(0.7); + } } \ No newline at end of file