I'm trying to implement the second solution found here to get text to fade up on ng-show. My HTML is:
<input ng-focus="hasFocus = true" ng-blur="hasFocus = false"
type="text" placeholder="Click to fade"/>
<p ng-show="hasFocus" class="fader">Fade me</p>
My CSS is:
.fader.ng-show {
transition: all linear 500ms;
opacity: 1;
}
.fader.ng-hide {
transition: all linear 500ms;
opacity: 0;
}
and my Angular is:
var myApp = angular.module('myApp', []);
A JSFiddle is here.
I just did same which you are looking but I never use ngAnimate in angular so I took sample code from your reference link of stackoverflow question and add fader.ng-hide-remove and add class now It is working fine, Hope this will satisfy your condition.
var myApp = angular.module('myApp', ['ngAnimate']);
.fader.ng-hide {
opacity: 0;
}
.fader.ng-hide-remove,
.fader.ng-hide-add {
display: block !important;
}
.fader.ng-hide-remove {
transition: all linear 1000ms;
}
.fader.ng-hide-add {
transition: all linear 500ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<div ng-app="myApp">
<input ng-focus="hasFocus = true" ng-blur="hasFocus = false" type="text" placeholder="Click to fade"/>
<p ng-show="hasFocus" class="fader">Fade me</p>
</div>
The ng-hide class sets display: none!important.
Override with it with display: block!important;
The DEMO
.fader{
transition: all linear 500ms;
opacity: 1;
}
.fader.ng-hide {
display: block!important;
transition: all linear 500ms;
opacity: 0;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
<button ng-click="hasFocus=!hasFocus">
Click me
</button>
<p ng-show="hasFocus" class="fader">Fade me</p>
</body>
Related
How do I animate the children when the parent is toggled?
If you run the snippet, you can toggle the container on and off, but the children do not automatically animate, they just appear. But when you type into the box, you can see them animating.
I would like the children to animate when the parent appears as well.
I'm only really concerned with the entrance animation, not the exit.
Plunker: http://plnkr.co/edit/wMNHyPMFEUZBjwAyNekj?p=preview
angular.module('MyApp', ['ngAnimate']);
.repeat-animation {
box-sizing:border-box;
line-height:20px;
border:1px solid #ddd;
}
.repeat-animation.ng-enter-stagger,
.repeat-animation.ng-leave-stagger,
.repeat-animation.ng-move-stagger {
/* 200ms will be applied between each sucessive enter operation */
-webkit-transition-delay:0.2s;
transition-delay:0.2s;
}
.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}
.repeat-animation.ng-leave.ng-leave-active,
.repeat-animation.ng-enter,
.repeat-animation.ng-move {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
opacity:0;
line-height:0;
}
.repeat-animation.ng-leave,
.repeat-animation.ng-move.ng-move-active,
.repeat-animation.ng-enter.ng-enter-active {
opacity:1;
line-height:20px;
}
<!doctype html>
<html ng-app="MyApp">
<head>
<script type="text/javascript" src="http://code.angularjs.org/1.2.5/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.5/angular-animate.js"></script>
</head>
<body>
<div ng-if='show'>
<div ng-init="items=['a','b','c','d','e','x']">
<input placeholder="filter" ng-model="f" />
<div ng-repeat="item in items | filter:f" class="repeat-animation">
{{item}}
</div>
</div>
</div>
<button ng-click='show =! show'> Show Toggle </button>
</body>
</html>
Try like this, Hope this will help.
angular.module('demo', [
'ngAnimate'
]).controller('MainCtrl', function($scope) {
$scope.items=['a','b','c','d','e','x'];
$scope.show = false;
$scope.search = "";
$scope.toggle = function()
{
$scope.show = !$scope.show;
};
});
.repeat-animation {
box-sizing:border-box;
line-height:20px;
border:1px solid #ddd;
}
.repeat-animation.ng-enter-stagger,
.repeat-animation.ng-leave-stagger,
.repeat-animation.ng-move-stagger {
/* 200ms will be applied between each sucessive enter operation */
-webkit-transition-delay:0.2s;
transition-delay:0.2s;
}
.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}
.repeat-animation.ng-leave.ng-leave-active,
.repeat-animation.ng-enter,
.repeat-animation.ng-move {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
opacity:0;
line-height:0;
}
.repeat-animation.ng-leave,
.repeat-animation.ng-move.ng-move-active,
.repeat-animation.ng-enter.ng-enter-active {
opacity:1;
line-height:20px;
}
<!doctype html>
<html ng-app="demo">
<head>
<script type="text/javascript" src="http://code.angularjs.org/1.2.5/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.5/angular-animate.js"></script>
</head>
<body ng-controller="MainCtrl">
<input ng-show="show" placeholder="filter" ng-model="search" />
<div ng-if="show" ng-repeat="item in items | filter:search" class="repeat-animation">
{{item}}
</div>
<button ng-click='toggle()'> Show Toggle </button>
</body>
</html>
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 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'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.
Is it possible to fade the content of element that ng-bind-html fills in. Already tried to use the id.ng-enter or id.ng-leave without success.
ng-if will add/remove DOM element dynamically according to the boolean value of expression. ng-animation could attach to the element which has ng-if directive that change the DOM.
This element will be added when htmlContent is being filled in.
<body ng-controller="myCtrl">
<button ng-click="fillinContent()">fillin</button>
<div ng-if="htmlContent" class="toggle" ng-bind-html="htmlContent"></div>
</body>
Decalre the CSS3 transition
<style>
.toggle{
-webkit-transition: linear 1s;
-moz-transition: linear 1s;
-ms-transition: linear 1s;
-o-transition: linear 1s;
transition: linear 1s;
}
.toggle.ng-enter{
opacity: 0;
}
.toggle.ng-enter-active{
opacity: 1;
}
.toggle.ng-leave{
opacity: 1;
}
.toggle.ng-leave-active{
opacity: 0;
}
</style>
Controller
angular.module("myApp",['ngSanitize','ngAnimate'])
.controller("myCtrl",function($scope){
$scope.fillinContent = function(){
$scope.htmlContent = "content content";
}
});
The html content will fade in when you click the fill in button: