Skip to content

Instantly share code, notes, and snippets.

@moshfeu

moshfeu/adi-intro-animation.html

Last active June 19, 2018 08:57
Show Gist options
  • Save moshfeu/a4021af7c1ba0ca99d1fb8c287ad30eb to your computer and use it in GitHub Desktop.
Save moshfeu/a4021af7c1ba0ca99d1fb8c287ad30eb to your computer and use it in GitHub Desktop.
Download ZIP
adi intro animation
Raw
adi-intro-animation.html
<!-- source http://jsbin.com/tavecu -->
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="animate.css" rel="stylesheet">
<style id="jsbin-css">
.wrapper {
display: flex;
justify-content: space-between;
}
.inner {
height: 150px;
display: flex;
align-items: center;
}
/* Have to set height explicity on ui-view to prevent collapsing during animation*/
.well[ui-view] {
height: 65px;
}
.ui-view-container {
position: relative;
}
/*[ui-view] {
position: absolute;
top: 0;
left: 0;
width: 350px;
transition: all .5s ease;
}
[ui-view].ng-enter, [ui-view].ng-leave-active.ng-leave {
opacity: 0;
}
[ui-view].ng-enter.ng-enter-active, [ui-view].ng-leave {
opacity: 1;
}*/
.animatable {
transition: all 0.5s cubic-bezier(0.18, 1.02, 0.59, 0.93);
width: 350px;
position: absolute;
top: 0;
left: 0;
}
.animatable .intro-right .inner, .animatable .intro-left .inner {
transition: all 0.5s cubic-bezier(0.18, 1.02, 0.59, 0.93);
}
.animatable.ng-enter .intro-right .inner, .animatable.ng-enter .intro-left .inner, .animatable.ng-leave.ng-leave-active .intro-right .inner, .animatable.ng-leave.ng-leave-active .intro-left .inner {
opacity: 0;
}
.animatable.ng-enter .intro-right .inner, .animatable.ng-enter .intro-left .inner {
transform: translateY(10px);
}
.animatable.ng-enter .intro-right .inner {
transition-delay: .2s;
}
.animatable.ng-leave.ng-leave-active .intro-right .inner, .animatable.ng-leave.ng-leave-active .intro-left .inner {
transform: translateY(-10px);
}
.animatable.ng-enter.ng-enter-active .intro-right .inner, .animatable.ng-enter.ng-enter-active .intro-left .inner, .animatable.ng-leave .intro-right .inner, .animatable.ng-leave .intro-left .inner {
transform: translateY(0);
opacity: 1;
}
</style>
</head>
<body class="container">
<p><i>Best viewed in pop-out mode to see location changes. Click blue button on the right.</i></p>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a href="#/foo">Route 1</a></li>
<li><a href="#/bar">Route 2</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="span6 ui-view-container">
<div ui-view class="animatable" ng-class="{blabla: true}"></div>
</div>
</div>
<!-- Angular -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<!-- Angular Animate -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-animate.js"></script>
<!-- UI-Router -->
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router", "ngAnimate"])
myapp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state("foo", {
url: "/foo",
template: `<div class="wrapper">
<div class="intro-left">
<div class="inner">left</div>
</div>
<div class="intro-right">
<div class="inner">right</div>
</div>
</div>`
})
.state("bar", {
url: "/bar",
template: `<div class="wrapper">
<div class="intro-left">
<div class="inner">left2</div>
</div>
<div class="intro-right">
<div class="inner">right2</div>
</div>
</div>`
})
$urlRouterProvider.otherwise("/foo");
})
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<\!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="animate.css" rel="stylesheet">
</head>
<body class="container">
<p><i>Best viewed in pop-out mode to see location changes. Click blue button on the right.</i></p>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a href="#/foo">Route 1</a></li>
<li><a href="#/bar">Route 2</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="span6 ui-view-container">
<div ui-view class="animatable" ng-class="{blabla: true}"></div>
</div>
</div>
<\!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"><\/script>
<\!-- Angular Animate -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-animate.js"><\/script>
<\!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"><\/script>
<\!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router", "ngAnimate"])
myapp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state("foo", {
url: "/foo",
template: `<div class="wrapper">
<div class="intro-left">
<div class="inner">left</div>
</div>
<div class="intro-right">
<div class="inner">right</div>
</div>
</div>`
})
.state("bar", {
url: "/bar",
template: `<div class="wrapper">
<div class="intro-left">
<div class="inner">left2</div>
</div>
<div class="intro-right">
<div class="inner">right2</div>
</div>
</div>`
})
$urlRouterProvider.otherwise("/foo");
})
<\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.wrapper {
display: flex;
justify-content: space-between;
}
.inner {
height: 150px;
display: flex;
align-items: center;
}
/* Have to set height explicity on ui-view to prevent collapsing during animation*/
.well[ui-view]{
height: 65px;
}
.ui-view-container {
position: relative;
}
/*[ui-view] {
position: absolute;
top: 0;
left: 0;
width: 350px;
transition: all .5s ease;
}
[ui-view].ng-enter, [ui-view].ng-leave-active.ng-leave {
opacity: 0;
}
[ui-view].ng-enter.ng-enter-active, [ui-view].ng-leave {
opacity: 1;
}*/
@mixin child() {
.intro-right, .intro-left {
.inner {
@content;
}
}
}
$transition: all .5s cubic-bezier(.18,1.02,.59,.93);
.animatable {
transition: $transition;
width: 350px;
position: absolute;
top: 0;
left: 0;
@include child() {
transition: $transition;
}
&.ng-enter, &.ng-leave.ng-leave-active {
@include child() {
opacity: 0;
}
}
&.ng-enter {
@include child() {
transform: translateY(10px);
}
.intro-right .inner {
transition-delay: .2s;
}
}
&.ng-leave.ng-leave-active {
@include child() {
transform: translateY(-10px);
}
}
&.ng-enter.ng-enter-active, &.ng-leave {
@include child() {
transform: translateY(0);
opacity: 1;
}
}
}</script>
</body>
</html>
Raw
jsbin.tavecu.css
.wrapper {
display: flex;
justify-content: space-between;
}
.inner {
height: 150px;
display: flex;
align-items: center;
}
/* Have to set height explicity on ui-view to prevent collapsing during animation*/
.well[ui-view] {
height: 65px;
}
.ui-view-container {
position: relative;
}
/*[ui-view] {
position: absolute;
top: 0;
left: 0;
width: 350px;
transition: all .5s ease;
}
[ui-view].ng-enter, [ui-view].ng-leave-active.ng-leave {
opacity: 0;
}
[ui-view].ng-enter.ng-enter-active, [ui-view].ng-leave {
opacity: 1;
}*/
.animatable {
transition: all 0.5s cubic-bezier(0.18, 1.02, 0.59, 0.93);
width: 350px;
position: absolute;
top: 0;
left: 0;
}
.animatable .intro-right .inner, .animatable .intro-left .inner {
transition: all 0.5s cubic-bezier(0.18, 1.02, 0.59, 0.93);
}
.animatable.ng-enter .intro-right .inner, .animatable.ng-enter .intro-left .inner, .animatable.ng-leave.ng-leave-active .intro-right .inner, .animatable.ng-leave.ng-leave-active .intro-left .inner {
opacity: 0;
}
.animatable.ng-enter .intro-right .inner, .animatable.ng-enter .intro-left .inner {
transform: translateY(10px);
}
.animatable.ng-enter .intro-right .inner {
transition-delay: .2s;
}
.animatable.ng-leave.ng-leave-active .intro-right .inner, .animatable.ng-leave.ng-leave-active .intro-left .inner {
transform: translateY(-10px);
}
.animatable.ng-enter.ng-enter-active .intro-right .inner, .animatable.ng-enter.ng-enter-active .intro-left .inner, .animatable.ng-leave .intro-right .inner, .animatable.ng-leave .intro-left .inner {
transform: translateY(0);
opacity: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment