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
Related
Anyone know how to resize an image up and down on click.
Example: nrk.no
The website you give as an example uses CSS Transitions to make some of their images grow and shrink. You can learn more about CSS Transitions at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Below is a simple example using JQuery. When you click on the Google logo it will grow and when you click on it again it will shrink.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.box img {
transition: width .4s,margin .4s,max-width .4s;
transition-property: width, margin, max-width;
transition-duration: 0.4s, 0.4s, 0.4s;
transition-timing-function: ease, ease, ease;
transition-delay: 0s, 0s, 0s;
}
.box img.clicked{
width: 500px;
}
</style>
<script>
$(function(){
$('.box img').on('click', function() {
$(this).toggleClass('clicked');
});
});
</script>
</head>
<body>
<div class="box">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
</body>
</html>
I try to make a little slider, but it works only in Google Chrome.
In FireFox (version 47) it doesn't work.
The CSS file is that:
#home-container {
width: 500px;
height: 300px;
background-image: url("img1.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
and the HTML (with a little script):
<!DOCTYPE html>
<html>
<head>
<title>CSS Slider</title>
<link rel="stylesheet" href="style.css"/>
<script>
var index = 0;
function changeImage() {
var imgArr = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
document.getElementById("home-container").style.backgroundImage = "url('" + imgArr[index] + "')";
index++;
if (index >= imgArr.length) {
index = 0;
}
}
setInterval(changeImage, 2000);
</script>
</head>
<body>
<div id="home-container">
</div>
</body>
</html>
PS: I need a solution for that code, not an alternative to use jQuery.
Firefox won't support it according to this bug nor is it an animatable property (https://www.w3.org/TR/css3-transitions/#animatable-properties).
See this awswer for details.
Can u try to add transition-delay (4th parameter) equal 0, into all properties?
Maybe you can play with the opacity attribute. Check this: http://www.quirksmode.org/js/opacity.html is a way to set opacity in all elemnts.
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 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
I'm quite new to Angular, so I'm affraid you will need to point in me right direction.
I'm trying to execute a CSS animation using AngularJS.
If you look at the original code, a CSS animation can be executed quite easily, see this plunker:
http://plnkr.co/edit/MCY3FOV7qLk7YfyzJfob?p=preview
But, the problem is that this is working through the css class property: sample-show-hide
Let's see the following HTML:
<body ng-app="ngAnimate">
<div ng-init="checked=true">
<label>
<input type="checkbox" ng-model="checked" style="float:left; margin- right:10px;"> Is Visible...
</label>
<div class="check-element" ng-class="{'sample-show-hide': }" ng-show="checked" style="clear:both;">
Visible...
</div>
</div>
</body>
But now, I want the class for the animation to set through the ng-class directive, but unfortunately, the animation doesn't work anymore then.
Please have a look at this plunker: http://plnkr.co/edit/MCY3FOV7qLk7YfyzJfob?p=preview
I invested some time and I think I atleast partially solved your problems:
First things first, your plnkr links both link to the same plnkr and the same version, this isn't very helpfull as I couldn't really see the difference.
Additionally the latest version in your plnkr had some mistakes (e.g. not injecting ngAnimate into your angular app).
The main reason why your animation didn't work was actually your CSS code.
You should read up on how it works here.
I took a working CSS from this stackoverflow answer and used it in your code.
My code is now looking like this:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example3-production</title>
<script data-require="angular.js#*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
<link href="animations.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="controller.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular-animate.js"></script>
</head>
<body ng-app="OfficeUI" ng-controller="OfficeUIController as OficeUI">
<div>
<label>
<input type="checkbox" style="float:left; margin-right:10px;" ng-click="isActive()"/>
Is Visible...
</label>
<div class="sample-show-hide" ng-class="'reveal-animation'" ng-show="trigger" style="clear:both;">
Visible...
</div>
</div>
</body>
</html>
controller.js :
var OfficeUI = angular.module('OfficeUI', ['ngAnimate']);
// Defines the AngularJS 'OfficeUI' controller.
OfficeUI.controller('OfficeUIController', ['$scope', function($scope) {
$scope.isActive = function(){
$scope.trigger = !$scope.trigger;
console.log($scope.trigger);
};
$scope.trigger = false;
}]);
animation.css :
body { font-family: 'Segoe UI'; color: #444; }
.sample-show-hide{
padding:10px;
border:1px solid black;
background-color:white;
}
.reveal-animation.ng-hide.ng-hide-add-active {
display: block !important;
}
.reveal-animation.ng-hide-remove {
-webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
.reveal-animation.ng-hide-add {
-webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
}
#-webkit-keyframes enter_sequence {
0% { opacity:0; }
100% { opacity:1; }
}
#keyframes enter_sequence {
0% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes leave_sequence {
0% { opacity:1; }
100% { opacity:0; }
}
#keyframes leave_sequence {
0% { opacity:1; }
100% { opacity:0; }
}
I forked (twice by accident :D ) your plnkr here.