I certainly hope that you guys can show me where did I go wrong.
So I try to put together ui-router with ng-animate. Routing works like charm. However, ng-animate staggers to kick in. According to all the samples and docs that I've been reading, the ui-view container should be duplicated, but it does not occur. Instead the container's innerHTML is replaced. I also use an external animation library called animate.css
So I put together a plunkr in hope that some of you could help me out.
Here is a plunkr demo
view1:
<section class="view1" >
<h1>VIEW 1</h1>
<a ui-sref="view2">view2</a>
</section>
view2:
<section class="view2" >
<h1>VIEW 2</h1>
<a ui-sref="view1">view1</a>
</section>
styles:
body {
width: 100%;
}
.view-container {
width: 100%;
}
.view-container.ng-enter .view1,
.view-container.ng-enter .view2,
.view-container.ng-leave .view1,
.view-container.ng-leave .view2 {
position: absolute;
left: 30px;
right: 30px;
transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
}
.view-container.ng-enter .view1,
.view-container.ng-enter .view2 {
-webkit-animation: slideInRight 0.5s both ease;
-moz-animation: slideInRight 0.5s both ease;
animation: slideInRight 0.5s both ease;
}
.view-container.ng-leave .view1 .view-container.ng-leave .view2 {
-webkit-animation: slideOutLeft 0.5s both ease;
-moz-animation: slideOutLeft 0.5s both ease;
animation: slideOutLeft 0.5s both ease;
}
.view1,
.view2 {
width: 100%;
height: 300px;
border: 2px solid red;
}
.view2 {
border: 2px solid green;
}
scripts:
'use strict';
var mainModule = angular.module('poc', ['ui.router', 'ngAnimate']);
mainModule.config(["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('view1', {
url: '/view1',
templateUrl: 'view1.html',
}).state('view2', {
url: '/view2',
templateUrl: 'view2.html',
});
$urlRouterProvider.otherwise('/view1');
}
]);
mainModule.run(["$rootScope", "$state",
function($rootScope, $state) {
$rootScope.$on('$stateChangeSuccess', function(event, endState, endParams, startState, startParams) {
console.log(endState);
});
$rootScope.$on('$stateChangeError', function(event, endState, endParams, startState, startParams) {
console.warn(startState);
console.warn(endState);
});
}
]);
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body data-ng-app="poc">
<div ui-view="" class="view-container"></div>
<script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9" data-require="angular.js#1.4.9"></script>
<script src="https://code.angularjs.org/1.4.9/angular-animate.js" data-semver="1.4.9" data-require="angular-animate#*"></script>
<script data-require="ui-router#0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</body>
</html>
Any help is appreciated.
You need to add some animation definitions for slideInRight and slideOutLeft
Can use animate.css library for those.
For starters I suggest moving the animation selectors to your <ui-view> element
What actually happens is when a transition time is detected....the element will be cloned allowing for 2 in dom at once ... one entering and one leaving. You can see this in the live html in browser dev tools
DEMO
Related
I've added a dependency ngAnimate to AngularJS:
var app=angular.module('testApp',['ngRoute', 'ngAnimate']);
and I've added the animations classes to animation.css:
.slide-animation.ng-enter, .slide-animation.ng-leave {
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
position:relative;
height: 1000px;
}
and included this CSS file in the head:
<head>
<link href="app/styles/animations.css" rel="stylesheet" type="text/css"/>
</head>
Then I've used this class in my index.html file:
<!doctype html>
<html ng-app="testApp">
<head>
<title>Foo App</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet" type="text/css"/>
<link href="app/styles/animations.css" rel="stylesheet" type="text/css"/>
</head>
<body >
<div ng-view="" class="slide-animation"></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/employeeController.js"> </script>
<script src="app/controllers/depController.js"></script>
<script src="app/services/employeeFactory.js"/></script>
</body>
However, there is no slide animation.
I've seen this tutorial and my actions are the same to get used animations from the animation.css file.
Please, does anybody know what I've missed?
Check if scripts/angular-animate.js is loaded. You can verify this by inspecting the file existence in the source or the network panel in every browser.
From what you described angular-animate.js file is not included into the document, that's why the ngAnimate directive is not working.
I think you missed ng-app.
Place ng-app="app" on BODY or HTML as attribute.
and place the ng-animate on the div like this.
<body ng-app="app">
<div ng-view="" class="slide-animation" ng-animate="animate"></div>
<body>
CSS:
.slide-animation {
left: 0;
top: 0;
width: 100%;
height: 100%;
min-height: 560px;
}
.slide-animation.ng-enter .ng-enter-active, .slide-animation.ng-leave {
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
position:relative;
height: 1000px;
}
Then I think it will be works
I'm having big trouble making a website. For some reason in whatever I do I can never get javascript to work. Is there something I'm missing for 'enabling' this?
For example I copied a very simple thing exactly.
https://codepen.io/thetallweeks/pen/boinE
In a test file this is:
<html>
<head>
<script>
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
</script>
<style>
.box {
background-color: #218D9B;
height: 100px;
width: 100px;
}
.transform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.transform-active {
background-color: #45CEE0;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="box transform">
</div>
<input type="button" id="button" value="Click Me"></input>
</body>
</html>
Yet the button does nothing in my test file.
What did I do wrong?
In addition to making sure JQuery has been loaded you should also load your JQuery code(script tag) before the closing body tag or wrap it in a document ready function call. If JQuery has been loaded then what is happening is that the JQuery is being executed before the html element your are attaching the event to has actually been loaded. So basically the JQuery event can't see your button element yet.
$(document).ready(function(){
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
});
The $() is a jQuery shorthand for finding elements in DOM. Did you include the jQuery Library?
Try this
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
</script>
<style>
.box {
background-color: #218D9B;
height: 100px;
width: 100px;
}
.transform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.transform-active {
background-color: #45CEE0;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="box transform">
</div>
<input type="button" id="button" value="Click Me"></input>
</body>
</html>
This happens as you did not include Jquery and tried using it.
Note additional script tag on the top of your script tag
I tried to use ng-animate i included in my controller
app = angular.module('Packs', ['ngAnimate']);
This is my style:
<style>
.animate-in {
opacity: 0;
max-height: 0;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.animate-out{
opacity: 1;
max-height: 200px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
</style>
This is the html that is not working, well, it does work, just i had to do it toggling classes manually, i wanted to use ng-animate
<div ng-click="toggle('pack1')">
<div class="text"
ng-class="{'animate-in' : !displays.pack1,
'animate-out' : displays.pack1}">
Some text to toggle
</div>
</div>
Yes, use ng-show = "displays.pack1" on your text and then use the special classes ng-hide/ng-hide-active, see example in the documentation
Here is a jsfiddle that shows a toggle with opacity and height: http://jsfiddle.net/1djeqjfm/1/
.box.ng-hide { opacity:0; }
.box.ng-hide-active { opacity:1; }
(Or use ng-if and its classes ng-enter/ng-leave)
I wanna display a growing column when loading my website like this:
function init() {
document.getElementsByClassName('col')[0].style.height = '50px';
}
.col {
width: 20px;
min-height: 1px;
transition: height 0.5s ease-out 0s;
background-color: red;
}
<body onload="init()" >
<div class="col" ></div>
</body>
But as you can see it doesn't work. Would it theoretically help to have the onload-attribute placed in the attributes of the div? But that doesn't work, right?
I also could use keyframe animations, I guess. However, I actually have more column than one and all of them should grow to a different height. Therefore I would have to create a keyframe animation for each of my columns, which is kind of messy, I believe.
Does anyone know a clean solution to my problem? Thanks in advance...
This works. Need webkit for Chrome/Safair I believe. Pretty sure you can't animate from min-height either as min-height is not a height. CSS transitions only work from set value to set value.
function init() {
var d = document.getElementsByClassName('col')[0];
d.className = d.className + " col-animate";
}
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
background-color: red;
}
.col-animate {
height: 50px;
}
<body onload="init()" >
<div class="col" ></div>
</body>
It will be good to write like below example CSS to support more possible browsers
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s; // webkit - chrome safari
-o-transition: all 0.5s ease-out 0s; // Opera
-moz-transition: all 0.5s ease-out 0s; // Mozilla
background-color: red;
}
This is my html:
<html>
<head></head>
<body>
<form role="form" ng-if="on" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
...stuff...
</form>
</body>
</html>
This is my model:
$scope.on = false;
//attaching this function to the window so i can call it from the console
window.switchOn = function() {
$scope.$apply(function() {
$scope.on = !$scope.on
});
}
This is my CSS:
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
I've also added the ngAnimate inclusion to my app controller:
angular.module('app', [..., 'ngAnimate'])...
The purpose of this is to toggle the form from the console. According to the ngAnimate docs, the form should animate into appearance (I'm using Chrome). But it isn't. I've included the angular-animate file. I can see it in the loaded sources. What am i doing wrong?
Step One: Make sure you are including the ng-animate module. Here are the steps from the docs:
Animations are not available unless you include the ngAnimate module as a dependency within your application.
First include angular-animate.js in your HTML:
<script src="angular.js">
<script src="angular-animate.js">
You can download this file from the following places:
Google CDN
//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js
Bower
bower install angular-animate#X.Y.Z
code.angularjs.org
//code.angularjs.org/X.Y.Z/angular-animate.js"
where X.Y.Z is the AngularJS version you are running.
Then load the module in your application by adding it as a dependent module:
angular.module('app', ['ngAnimate']);
With that you're ready to get started!
Step Two:
Your CSS needs to have a .ng-enter class:
.reveal-animation.ng-enter {
-webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
#-webkit-keyframes enter_sequence {
from { opacity:0; }
to { opacity:1; }
}
#keyframes enter_sequence {
from { opacity:0; }
to { opacity:1; }
}
And your html simply has to have the class:
class="reveal-animation"
http://jsfiddle.net/bpR66/
If pre version 1.2
Your CSS needs to have -setup, and -setup.-start classes:
.animate-enter-setup {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-enter-setup {
max-height: 0;
opacity:0;
}
.animate-enter-setup.animate-enter-start {
opacity:1;
min-height: 20px;
}
Here is a fiddle I modified to show an example (not using a form, but should demonstrate): http://jsfiddle.net/xv5ry/1/