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

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 ...

随机推荐

关于C#线程，线程池和并行运算的简单使用和对比
转自:https://www.cnblogs.com/jeffwongishandsome/archive/2010/11/12/1876137.html 先大概看一下控制台应用程序的Main方法的主 ...
使用Percona MySQL 5.7版本遇到的坑
监控DB由于使用的TokuDB引擎,因此选择使用Percona MySQL 5.7版本,在使用过程中遇到了比较多的坑,在这里做一下简单的记录,希望对广大DBA有帮助. load文件飙升导致的DB雪崩 ...
（转）光照模型及cg实现
经典光照模型(illumination model) 物体表面光照颜色由入射光.物体材质,以及材质和光的交互规律共同决定. 由于环境光给予物体各个点的光照强度相同,且没有方向之分,所以在只有环境光的情 ...
MySQL 索引的介绍与应用
Mysql索引一. mysql 索引索引是对数据库表中一列或多列的值进行排序的一种结构,使用索引可快速访问数据库表中的特定信息. 二:MySQL索引类型按存储结构区分:聚集索引(又称聚类索引,簇 ...
MVC中使用EF的技巧集（一）
一.建好数据库后,向项目中添加数据模型. 1.右键点击“Models” 文件夹,选择“添加”,再选择“添加新项”. 2.在“添加新项”窗口,选择左边的“数据”,然后再在右边选择“ADO.NET 实体数 ...
zhuangxiu
红宝石家居广场国际家居馆党湾综合市场(青年文明路)
Mongo.exe 无法定位程序输入点terminate于动态链接库 *.dll的解决办法
Win7 或者Winserver 上安装新版的Mongo后,总是提示如上问题,可使用如下方法解决: 一是系统更新到SP1,并安装了KB2999226这个更新包(重要): 二是安装安装 Visual C ...
【错误记录】flask mysql 死锁
最近使用flask-sqlalchemy时,进行测试的时候发现日志中打印出了MySql死锁错误,查看Mysql日志发现是因为有俩条sql出现了死锁: Deadlock found when tryin ...
apt-spy来获得适合自己的源，适用于UBUNTU/Debian
使用ubuntu和debian等使用APT源的系统,有些时候是不是会不知道哪里有源,哪里的源比较快让自己的宽带完全利用,我们可以用apt-spy来自动找到 apt-spy -d unstable -a ...
深入 Java 调试体系: 第 1 部分，初探JPDA 体系
JPDA(Java Platform Debugger Architecture)是 Java 平台调试体系结构的缩写,通过 JPDA 提供的 API,开发人员可以方便灵活的搭建 Java 调试应用程 ...

angularjs-ui-router-animation

angularjs-ui-router-animation的更多相关文章

随机推荐

热门专题