angularjs-ui-router-animation
html
<!DOCTYPE html>
<html ng-app="APP">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body ng-controller="MainCtrl"> <div>
<ul>
<li><a ui-sref="home">home</a></li>
<li><a ui-sref="contact">contact</a></li>
<li><a ui-sref="about">about</a></li>
</ul>
<div ui-view ng-class="{true:'slide-left',false:'slide-right'}[leftorright]"> </div>
<div> <script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
var APP = angular.module('APP', ['ngAnimate','ui.router']);
APP.run(function($animate) {
$animate.enabled(true);
});
APP.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "tpl/home.html"
})
.state('contact', {
url: "/contact",
templateUrl: "tpl/contact.html",
controller: function($scope) {
$scope.leftorright = false;
}
})
.state('about', {
url: "/about",
templateUrl: "tpl/about.html"
});
});
APP.controller('MainCtrl', function ($scope) {
$scope.leftorright = true;
});
main.css
*{
color: red;
}
li{
display: inline-block;
}
/*https://github.com/Augus/ngAnimate/tree/master/css*/
/* ------------------------------------------- */
/* Mixins
/* ------------------------------------------- */
/* ------------------------------------------- */
/* Toggle Fade
/* ------------------------------------------- */
/* line 64, ../sass/ng-animation.scss */
.toggle {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
/* line 66, ../sass/ng-animation.scss */
.toggle.ng-enter {
opacity:;
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
}
/* line 71, ../sass/ng-animation.scss */
.toggle.ng-enter-active {
opacity:;
}
/* line 75, ../sass/ng-animation.scss */
.toggle.ng-leave {
opacity:;
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
}
/* line 80, ../sass/ng-animation.scss */
.toggle.ng-leave-active {
opacity:;
}
/* line 85, ../sass/ng-animation.scss */
.toggle.ng-hide-add {
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 89, ../sass/ng-animation.scss */
.toggle.ng-hide-add.ng-hide-add-active {
opacity:;
}
/* line 94, ../sass/ng-animation.scss */
.toggle.ng-hide-remove {
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 99, ../sass/ng-animation.scss */
.toggle.ng-hide-remove.ng-hide-remove-active {
opacity:;
}
/* ------------------------------------------- */
/* Slide Top
/* ------------------------------------------- */
/* line 109, ../sass/ng-animation.scss */
.slide-top {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
/* line 111, ../sass/ng-animation.scss */
.slide-top.ng-enter {
transform: translateY(60px);
-ms-transform: translateY(60px);
-webkit-transform: translateY(60px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 117, ../sass/ng-animation.scss */
.slide-top.ng-enter-active {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
opacity:;
}
/* line 122, ../sass/ng-animation.scss */
.slide-top.ng-leave {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 128, ../sass/ng-animation.scss */
.slide-top.ng-leave-active {
transform: translateY(60px);
-ms-transform: translateY(60px);
-webkit-transform: translateY(60px);
opacity:;
}
/* line 134, ../sass/ng-animation.scss */
.slide-top.ng-hide-add {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 139, ../sass/ng-animation.scss */
.slide-top.ng-hide-add.ng-hide-add-active {
transform: translateY(60px);
-ms-transform: translateY(60px);
-webkit-transform: translateY(60px);
opacity:;
}
/* line 145, ../sass/ng-animation.scss */
.slide-top.ng-hide-remove {
transform: translateY(60px);
-ms-transform: translateY(60px);
-webkit-transform: translateY(60px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 151, ../sass/ng-animation.scss */
.slide-top.ng-hide-remove.ng-hide-remove-active {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
opacity:;
}
/* ------------------------------------------- */
/* Slide Rigth
/* ------------------------------------------- */
/* line 163, ../sass/ng-animation.scss */
.slide-right {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
/* line 165, ../sass/ng-animation.scss */
.slide-right.ng-enter {
transform: translateX(60px);
-ms-transform: translateX(60px);
-webkit-transform: translateX(60px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 171, ../sass/ng-animation.scss */
.slide-right.ng-enter-active {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
opacity:;
}
/* line 176, ../sass/ng-animation.scss */
.slide-right.ng-leave {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 182, ../sass/ng-animation.scss */
.slide-right.ng-leave-active {
transform: translateX(60px);
-ms-transform: translateX(60px);
-webkit-transform: translateX(60px);
opacity:;
}
/* line 188, ../sass/ng-animation.scss */
.slide-right.ng-hide-add {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 193, ../sass/ng-animation.scss */
.slide-right.ng-hide-add.ng-hide-add-active {
transform: translateX(60px);
-ms-transform: translateX(60px);
-webkit-transform: translateX(60px);
opacity:;
}
/* line 199, ../sass/ng-animation.scss */
.slide-right.ng-hide-remove {
transform: translateX(60px);
-ms-transform: translateX(60px);
-webkit-transform: translateX(60px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 205, ../sass/ng-animation.scss */
.slide-right.ng-hide-remove.ng-hide-remove-active {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
opacity:;
}
/* ------------------------------------------- */
/* Slide Left
/* ------------------------------------------- */
/* line 217, ../sass/ng-animation.scss */
.slide-left {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
/* line 219, ../sass/ng-animation.scss */
.slide-left.ng-enter {
transform: translateX(-60px);
-ms-transform: translateX(-60px);
-webkit-transform: translateX(-60px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 225, ../sass/ng-animation.scss */
.slide-left.ng-enter-active {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
opacity:;
}
/* line 230, ../sass/ng-animation.scss */
.slide-left.ng-leave {
/* transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity: 1;*/
}
/* line 236, ../sass/ng-animation.scss */
.slide-left.ng-leave-active {
transform: translateX(-60px);
-ms-transform: translateX(-60px);
-webkit-transform: translateX(-60px);
opacity:;
}
/* line 242, ../sass/ng-animation.scss */
.slide-left.ng-hide-add {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 247, ../sass/ng-animation.scss */
.slide-left.ng-hide-add.ng-hide-add-active {
transform: translateX(-60px);
-ms-transform: translateX(-60px);
-webkit-transform: translateX(-60px);
opacity:;
}
/* line 253, ../sass/ng-animation.scss */
.slide-left.ng-hide-remove {
transform: translateX(-60px);
-ms-transform: translateX(-60px);
-webkit-transform: translateX(-60px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 259, ../sass/ng-animation.scss */
.slide-left.ng-hide-remove.ng-hide-remove-active {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
opacity:;
}
/* ------------------------------------------- */
/* Slide Down
/* ------------------------------------------- */
/* line 270, ../sass/ng-animation.scss */
.slide-down {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
/* line 273, ../sass/ng-animation.scss */
.slide-down.ng-enter {
transform: translateY(-60px);
-ms-transform: translateY(-60px);
-webkit-transform: translateY(-60px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 279, ../sass/ng-animation.scss */
.slide-down.ng-enter-active {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
opacity:;
}
/* line 284, ../sass/ng-animation.scss */
.slide-down.ng-leave {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 290, ../sass/ng-animation.scss */
.slide-down.ng-leave-active {
transform: translateY(-60px);
-ms-transform: translateY(-60px);
-webkit-transform: translateY(-60px);
opacity:;
}
/* line 296, ../sass/ng-animation.scss */
.slide-down.ng-hide-add {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 301, ../sass/ng-animation.scss */
.slide-down.ng-hide-add.ng-hide-add-active {
transform: translateY(-60px);
-ms-transform: translateY(-60px);
-webkit-transform: translateY(-60px);
opacity:;
}
/* line 307, ../sass/ng-animation.scss */
.slide-down.ng-hide-remove {
transform: translateY(-60px);
-ms-transform: translateY(-60px);
-webkit-transform: translateY(-60px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 313, ../sass/ng-animation.scss */
.slide-down.ng-hide-remove.ng-hide-remove-active {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
opacity:;
}
/* ------------------------------------------- */
/* Bouncy Slide Top
/* ------------------------------------------- */
/* line 325, ../sass/ng-animation.scss */
.bouncy-slide-top {
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1);
/* older webkit */
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* easeOutBack */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1);
/* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
/* custom */
}
/* line 328, ../sass/ng-animation.scss */
.bouncy-slide-top.ng-enter {
transform: translateY(240px);
-ms-transform: translateY(240px);
-webkit-transform: translateY(240px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 334, ../sass/ng-animation.scss */
.bouncy-slide-top.ng-enter-active {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
opacity:;
}
/* line 339, ../sass/ng-animation.scss */
.bouncy-slide-top.ng-leave {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 345, ../sass/ng-animation.scss */
.bouncy-slide-top.ng-leave-active {
transform: translateY(240px);
-ms-transform: translateY(240px);
-webkit-transform: translateY(240px);
opacity:;
}
/* line 351, ../sass/ng-animation.scss */
.bouncy-slide-top.ng-hide-add {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 356, ../sass/ng-animation.scss */
.bouncy-slide-top.ng-hide-add.ng-hide-add-active {
transform: translateY(240px);
-ms-transform: translateY(240px);
-webkit-transform: translateY(240px);
opacity:;
}
/* line 362, ../sass/ng-animation.scss */
.bouncy-slide-top.ng-hide-remove {
transform: translateY(240px);
-ms-transform: translateY(240px);
-webkit-transform: translateY(240px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 368, ../sass/ng-animation.scss */
.bouncy-slide-top.ng-hide-remove.ng-hide-remove-active {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
opacity:;
}
/* ------------------------------------------- */
/* Bouncy Slide Rigth
/* ------------------------------------------- */
/* line 379, ../sass/ng-animation.scss */
.bouncy-slide-right {
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1);
/* older webkit */
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* easeOutBack */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1);
/* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
/* custom */
}
/* line 382, ../sass/ng-animation.scss */
.bouncy-slide-right.ng-enter {
transform: translateX(240px);
-ms-transform: translateX(240px);
-webkit-transform: translateX(240px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 388, ../sass/ng-animation.scss */
.bouncy-slide-right.ng-enter-active {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
opacity:;
}
/* line 393, ../sass/ng-animation.scss */
.bouncy-slide-right.ng-leave {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 399, ../sass/ng-animation.scss */
.bouncy-slide-right.ng-leave-active {
transform: translateX(240px);
-ms-transform: translateX(240px);
-webkit-transform: translateX(240px);
opacity:;
}
/* line 405, ../sass/ng-animation.scss */
.bouncy-slide-right.ng-hide-add {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 410, ../sass/ng-animation.scss */
.bouncy-slide-right.ng-hide-add.ng-hide-add-active {
transform: translateX(240px);
-ms-transform: translateX(240px);
-webkit-transform: translateX(240px);
opacity:;
}
/* line 416, ../sass/ng-animation.scss */
.bouncy-slide-right.ng-hide-remove {
transform: translateX(240px);
-ms-transform: translateX(240px);
-webkit-transform: translateX(240px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 422, ../sass/ng-animation.scss */
.bouncy-slide-right.ng-hide-remove.ng-hide-remove-active {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
opacity:;
}
/* ------------------------------------------- */
/* Bouncy Slide Left
/* ------------------------------------------- */
/* line 434, ../sass/ng-animation.scss */
.bouncy-slide-left {
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1);
/* older webkit */
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* easeOutBack */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1);
/* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
/* custom */
}
/* line 437, ../sass/ng-animation.scss */
.bouncy-slide-left.ng-enter {
transform: translateX(-240px);
-ms-transform: translateX(-240px);
-webkit-transform: translateX(-240px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 443, ../sass/ng-animation.scss */
.bouncy-slide-left.ng-enter-active {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
opacity:;
}
/* line 448, ../sass/ng-animation.scss */
.bouncy-slide-left.ng-leave {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 454, ../sass/ng-animation.scss */
.bouncy-slide-left.ng-leave-active {
transform: translateX(-240px);
-ms-transform: translateX(-240px);
-webkit-transform: translateX(-240px);
opacity:;
}
/* line 460, ../sass/ng-animation.scss */
.bouncy-slide-left.ng-hide-add {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 465, ../sass/ng-animation.scss */
.bouncy-slide-left.ng-hide-add.ng-hide-add-active {
transform: translateX(-240px);
-ms-transform: translateX(-240px);
-webkit-transform: translateX(-240px);
opacity:;
}
/* line 471, ../sass/ng-animation.scss */
.bouncy-slide-left.ng-hide-remove {
transform: translateX(-240px);
-ms-transform: translateX(-240px);
-webkit-transform: translateX(-240px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 477, ../sass/ng-animation.scss */
.bouncy-slide-left.ng-hide-remove.ng-hide-remove-active {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
opacity:;
}
/* ------------------------------------------- */
/* Bouncy Slide Down
/* ------------------------------------------- */
/* line 488, ../sass/ng-animation.scss */
.bouncy-slide-down {
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1);
/* older webkit */
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* easeOutBack */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1);
/* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
/* custom */
}
/* line 491, ../sass/ng-animation.scss */
.bouncy-slide-down.ng-enter {
transform: translateY(-240px);
-ms-transform: translateY(-240px);
-webkit-transform: translateY(-240px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 497, ../sass/ng-animation.scss */
.bouncy-slide-down.ng-enter-active {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
opacity:;
}
/* line 502, ../sass/ng-animation.scss */
.bouncy-slide-down.ng-leave {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 508, ../sass/ng-animation.scss */
.bouncy-slide-down.ng-leave-active {
transform: translateY(-240px);
-ms-transform: translateY(-240px);
-webkit-transform: translateY(-240px);
opacity:;
}
/* line 514, ../sass/ng-animation.scss */
.bouncy-slide-down.ng-hide-add {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 519, ../sass/ng-animation.scss */
.bouncy-slide-down.ng-hide-add.ng-hide-add-active {
transform: translateY(-240px);
-ms-transform: translateY(-240px);
-webkit-transform: translateY(-240px);
opacity:;
}
/* line 525, ../sass/ng-animation.scss */
.bouncy-slide-down.ng-hide-remove {
transform: translateY(-240px);
-ms-transform: translateY(-240px);
-webkit-transform: translateY(-240px);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 531, ../sass/ng-animation.scss */
.bouncy-slide-down.ng-hide-remove.ng-hide-remove-active {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
opacity:;
}
/* ------------------------------------------- */
/* Scale Fade
/* ------------------------------------------- */
/* line 544, ../sass/ng-animation.scss */
.scale-fade {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
/* line 547, ../sass/ng-animation.scss */
.scale-fade.ng-enter {
transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 553, ../sass/ng-animation.scss */
.scale-fade.ng-enter-active {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
opacity:;
}
/* line 558, ../sass/ng-animation.scss */
.scale-fade.ng-leave {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 564, ../sass/ng-animation.scss */
.scale-fade.ng-leave-active {
transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
opacity:;
}
/* line 570, ../sass/ng-animation.scss */
.scale-fade.ng-hide-add {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 575, ../sass/ng-animation.scss */
.scale-fade.ng-hide-add.ng-hide-add-active {
transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
opacity:;
}
/* line 581, ../sass/ng-animation.scss */
.scale-fade.ng-hide-remove {
transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 587, ../sass/ng-animation.scss */
.scale-fade.ng-hide-remove.ng-hide-remove-active {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
opacity:;
}
/* ------------------------------------------- */
/* Spin Fade
/* ------------------------------------------- */
/* line 598, ../sass/ng-animation.scss */
.spin-toggle {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
/* line 601, ../sass/ng-animation.scss */
.spin-toggle.ng-enter {
transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 607, ../sass/ng-animation.scss */
.spin-toggle.ng-enter-active {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
opacity:;
}
/* line 612, ../sass/ng-animation.scss */
.spin-toggle.ng-leave {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 618, ../sass/ng-animation.scss */
.spin-toggle.ng-leave-active {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
opacity:;
}
/* line 624, ../sass/ng-animation.scss */
.spin-toggle.ng-hide-add {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 629, ../sass/ng-animation.scss */
.spin-toggle.ng-hide-add.ng-hide-add-active {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
opacity:;
}
/* line 635, ../sass/ng-animation.scss */
.spin-toggle.ng-hide-remove {
transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 641, ../sass/ng-animation.scss */
.spin-toggle.ng-hide-remove.ng-hide-remove-active {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
opacity:;
}
/* ------------------------------------------- */
/* Scale in Fade
/* ------------------------------------------- */
/* line 653, ../sass/ng-animation.scss */
.scale-fade-in {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
/* line 656, ../sass/ng-animation.scss */
.scale-fade-in.ng-enter {
transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 662, ../sass/ng-animation.scss */
.scale-fade-in.ng-enter-active {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
opacity:;
}
/* line 667, ../sass/ng-animation.scss */
.scale-fade-in.ng-leave {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 673, ../sass/ng-animation.scss */
.scale-fade-in.ng-leave-active {
transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
opacity:;
}
/* line 679, ../sass/ng-animation.scss */
.scale-fade-in.ng-hide-add {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity:;
}
/* line 684, ../sass/ng-animation.scss */
.scale-fade-in.ng-hide-add.ng-hide-add-active {
transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
opacity:;
}
/* line 690, ../sass/ng-animation.scss */
.scale-fade-in.ng-hide-remove {
transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity:;
}
/* line 696, ../sass/ng-animation.scss */
.scale-fade-in.ng-hide-remove.ng-hide-remove-active {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
opacity:;
}
/* ------------------------------------------- */
/* Bouncy Scale in Fade
/* ------------------------------------------- */
/* line 708, ../sass/ng-animation.scss */
.bouncy-scale-in {
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1);
/* older webkit */
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* easeOutBack */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1);
/* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
/* custom */
}
/* line 711, ../sass/ng-animation.scss */
.bouncy-scale-in.ng-enter {
transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
transition-duration: 450ms;
-webkit-transition-duration: 450ms;
opacity:;
}
/* line 717, ../sass/ng-animation.scss */
.bouncy-scale-in.ng-enter-active {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
opacity:;
}
/* line 722, ../sass/ng-animation.scss */
.bouncy-scale-in.ng-leave {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transition-duration: 450ms;
-webkit-transition-duration: 450ms;
opacity:;
}
/* line 728, ../sass/ng-animation.scss */
.bouncy-scale-in.ng-leave-active {
transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
opacity:;
}
/* line 734, ../sass/ng-animation.scss */
.bouncy-scale-in.ng-hide-add {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transition-duration: 450ms;
-webkit-transition-duration: 450ms;
opacity:;
}
/* line 739, ../sass/ng-animation.scss */
.bouncy-scale-in.ng-hide-add.ng-hide-add-active {
transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
opacity:;
}
/* line 745, ../sass/ng-animation.scss */
.bouncy-scale-in.ng-hide-remove {
transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
transition-duration: 450ms;
-webkit-transition-duration: 450ms;
display: block !important;
opacity:;
}
/* line 751, ../sass/ng-animation.scss */
.bouncy-scale-in.ng-hide-remove.ng-hide-remove-active {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
opacity:;
}
/* ------------------------------------------- */
/* Flip In
/* ------------------------------------------- */
/* line 763, ../sass/ng-animation.scss */
.flip-in {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
/* line 766, ../sass/ng-animation.scss */
.flip-in.ng-enter {
transform: perspective(300px) rotateX(90deg);
-ms-transform: perspective(300px) rotateX(90deg);
-webkit-transform: perspective(300px) rotateX(90deg);
transition-duration: 550ms;
-webkit-transition-duration: 550ms;
opacity: 0.7;
}
/* line 772, ../sass/ng-animation.scss */
.flip-in.ng-enter-active {
transform: perspective(300px) rotateX(0deg);
-ms-transform: perspective(300px) rotateX(0deg);
-webkit-transform: perspective(300px) rotateX(0deg);
opacity:;
}
/* line 777, ../sass/ng-animation.scss */
.flip-in.ng-leave {
transform: perspective(300px) rotateX(0deg);
-ms-transform: perspective(300px) rotateX(0deg);
-webkit-transform: perspective(300px) rotateX(0deg);
transition-duration: 550ms;
-webkit-transition-duration: 550ms;
opacity:;
}
/* line 783, ../sass/ng-animation.scss */
.flip-in.ng-leave-active {
transform: perspective(300px) rotateX(135deg);
-ms-transform: perspective(300px) rotateX(135deg);
-webkit-transform: perspective(300px) rotateX(135deg);
opacity: 0.7;
}
/* line 789, ../sass/ng-animation.scss */
.flip-in.ng-hide-add {
transform: perspective(300px) rotateX(0deg);
-ms-transform: perspective(300px) rotateX(0deg);
-webkit-transform: perspective(300px) rotateX(0deg);
transition-duration: 550ms;
-webkit-transition-duration: 550ms;
opacity:;
}
/* line 794, ../sass/ng-animation.scss */
.flip-in.ng-hide-add.ng-hide-add-active {
transform: perspective(300px) rotateX(135deg);
-ms-transform: perspective(300px) rotateX(135deg);
-webkit-transform: perspective(300px) rotateX(135deg);
opacity:;
}
/* line 800, ../sass/ng-animation.scss */
.flip-in.ng-hide-remove {
transform: perspective(300px) rotateX(90deg);
-ms-transform: perspective(300px) rotateX(90deg);
-webkit-transform: perspective(300px) rotateX(90deg);
transition-duration: 550ms;
-webkit-transition-duration: 550ms;
display: block !important;
opacity:;
}
/* line 806, ../sass/ng-animation.scss */
.flip-in.ng-hide-remove.ng-hide-remove-active {
transform: perspective(300px) rotateX(0deg);
-ms-transform: perspective(300px) rotateX(0deg);
-webkit-transform: perspective(300px) rotateX(0deg);
opacity:;
}
/* ------------------------------------------- */
/* Rotate In
/* ------------------------------------------- */
/* line 817, ../sass/ng-animation.scss */
.rotate-in {
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1);
/* older webkit */
-webkit-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0 cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* easeOutBack */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1);
/* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.45, 1.595);
/* custom */
}
/* line 820, ../sass/ng-animation.scss */
.rotate-in.ng-enter {
transform: perspective(300px) rotateY(40deg);
-ms-transform: perspective(300px) rotateY(40deg);
-webkit-transform: perspective(300px) rotateY(40deg);
transition-duration: 550ms;
-webkit-transition-duration: 550ms;
opacity: 0.7;
}
/* line 826, ../sass/ng-animation.scss */
.rotate-in.ng-enter-active {
transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
-webkit-transform: perspective(300px) rotateY(0deg);
opacity:;
}
/* line 831, ../sass/ng-animation.scss */
.rotate-in.ng-leave {
transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
-webkit-transform: perspective(300px) rotateY(0deg);
transition-duration: 550ms;
-webkit-transition-duration: 550ms;
opacity:;
}
/* line 837, ../sass/ng-animation.scss */
.rotate-in.ng-leave-active {
transform: perspective(300px) rotateY(-40deg);
-ms-transform: perspective(300px) rotateY(-40deg);
-webkit-transform: perspective(300px) rotateY(-40deg);
opacity: 0.7;
}
/* line 843, ../sass/ng-animation.scss */
.rotate-in.ng-hide-add {
transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
-webkit-transform: perspective(300px) rotateY(0deg);
transition-duration: 550ms;
-webkit-transition-duration: 550ms;
opacity:;
}
/* line 848, ../sass/ng-animation.scss */
.rotate-in.ng-hide-add.ng-hide-add-active {
transform: perspective(300px) rotateY(-40deg);
-ms-transform: perspective(300px) rotateY(-40deg);
-webkit-transform: perspective(300px) rotateY(-40deg);
opacity:;
}
/* line 854, ../sass/ng-animation.scss */
.rotate-in.ng-hide-remove {
transform: perspective(300px) rotateY(40deg);
-ms-transform: perspective(300px) rotateY(40deg);
-webkit-transform: perspective(300px) rotateY(40deg);
transition-duration: 550ms;
-webkit-transition-duration: 550ms;
display: block !important;
opacity:;
}
/* line 860, ../sass/ng-animation.scss */
.rotate-in.ng-hide-remove.ng-hide-remove-active {
transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
-webkit-transform: perspective(300px) rotateY(0deg);
opacity:;
}
tpl/home.html
<div>
home
</div>
tpl/about.html
<div>
about
</div>
tpl/contact.html
<div>
contact
</div>
angularjs-ui-router-animation的更多相关文章
- [转]AngularJS+UI Router(1) 多步表单
本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现 在线demo演示地址https://rawgit.com/dream ...
- angularJS ui router 多视图单独刷新问题
场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...
- Angularjs ui router,路由嵌套 父controller执行问题
解决方式来源:https://stackoverflow.com/questions/25316591/angularjs-ui-router-state-reload-child-state-onl ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- ngRoute 和 ui.router 的使用方法和区别
在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...
- angularjs UI Libraries
angularjs UI Libraries ● ng-bootstrap is currently available. ● PrimeNG has largest number of compon ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- angular : $location & $state(UI router)的关系
次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...
随机推荐
- Tomcat – Java.Lang.OutOfMemoryError: PermGen Space
很多时候,在开发阶段Tomcat重复的重启过程中会遇到java.lang.OutOfMemoryError : PermGen space 错误. 1 2 3 4 java.lang.OutOfMem ...
- 使用 Azure CLI 创建和管理 Linux VM
Azure 虚拟机提供完全可配置的灵活计算环境. 本教程介绍 Azure 虚拟机的基本部署项目,例如选择 VM 大小.选择 VM 映像和部署 VM. 你将学习如何执行以下操作: 创建并连接到 VM 选 ...
- Oracle 客户端库时引发 BadImageFormatException
程序提示错误: 试加载 Oracle 客户端库时引发 BadImageFormatException.如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题. 出现场 ...
- 山寨Facebook的Shimmer效果
山寨Facebook的Shimmer效果 说明 主要是用到了CAGradientLayer的特性来实现特效效果,因为时间有限,并没有进行封装,待后续改进. 效果 源码(源码没有进行封装,细节都没有处理 ...
- [翻译] CNPPopupController
CNPPopupController CNPPopupController is a simple and versatile class for presenting a custom popup ...
- 超级好用的解析JSON数据的网站
超级好用的解析JSON数据的网站 网址 http://json.parser.online.fr/beta/ 效果图 测试数据 {,},,,,,,},{,,,,},{,,,,},{,,,,,,,,,, ...
- UNIX高级环境编程（4）Files And Directories - umask、chmod、文件系统组织结构和链接
本篇主要介绍文件和文件系统中常用的一些函数,文件系统的组织结构和硬链接.符号链接. 通过对这些知识的了解,可以对Linux文件系统有更为全面的了解. 1 umask函数 之前我们已经了解了每个文件 ...
- java开发初识
jdk目录相关介绍: bin:存放的是java的相关开发工具 db:顾名思义jre附带的轻量级数据库 include:存放的是调用系统资源的接口文件 jre:java的运行环境 lib:核心的类库 s ...
- 清除 Exchange 2013/2016/2019 日志和ETL文件
Exchange Server 的2个日志目录会增长的很快,需要定时清理,不然C盘的空间很快就会吃光,以下这个powershell脚本就是用于清理目录下面的日志的,已在生产环境中测试过,没问题: S ...
- December 01st 2016 Week 49th Thursday
Life is a maze and love is a riddle. 生活是个迷宫,爱情是个谜语. I am lost in both. Can you provide me some guida ...