Execute AngularJS animation using class, ng-show and ng-class - javascript

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.

Related

ng-show with CSS fader not working

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>

AngularJS animation of children when parent toggled

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>

animation Flip div when clicked

I am trying to make the divs flip whenever I click on them. I'm not sure why it doesn't work. Please help.
Here is the demo of this code. http://langbook.co/testicles-1-2-flashcards/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#flip3D{ width:240px; height:200px; margin:10px; float:left; }
#flip3D > #front{
position:absolute;
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
#flip3D > #back{
position:absolute;
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
</style>
<script>
function flip(el){
el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
el.children[0].style.transform = "perspective(600px) rotateY(0deg)";}
var vlib = document.getElementById('front');
vlib.addEventListener(click, flip(el));
</script>
<title>Flashcards</title>
</head>
<body>
<div id="flip3D">
<div id="back">Box - Back</div>
<div id="front">Box - Front </div>
</div>
</body>
</html>
First, I would move your JS to the end of the page.
It also seems like you want to be calling flip() on #flip3D, because you are trying to access it's child elements, like so:
var vlib = document.getElementById('flip3D');
vlib.addEventListener('click', flip(vlib));
To flip back, you could just keep the object's state in an attribute to know which side it's on. Also note that flip(vlib) will be called immediately; to wait for the click event, you'll need to pass a reference to the function:
vlib.addEventListener('click', flip);
Seems to work: JSFiddle
http://www.w3schools.com/css/css3_2dtransforms.asp
http://www.w3schools.com/css/css3_3dtransforms.asp
Not sure if you have tried this but this my solve your problem. Using just CSS you can do the exact same thing (by the sounds of what you are trying to achieve).
Hope this helps.
ex:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_backface-visibility
easy one CSS line :
animation:mymove 3s infinite;
where mymove is:
#keyframes mymove
{
from {transform:rotateY(0deg);}
to {transform:rotateY(360deg);}
}
#-moz-keyframes mymove /* Firefox */
{
from {-moz-transform:rotateY(0deg);}
to {-moz-transform:rotateY(360deg);}
}
#-webkit-keyframes mymove /* Opera, Safari, Chrome */
{
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(360deg);}
}
#-ms-keyframes mymove /* Internet Explorer */
{
from {-ms-transform:rotateY(0deg);}
to {-ms-transform:rotateY(360deg);}
}
example:
div#myDIV
{
animation:mymove 3s infinite;/* <== HERE */
/* Firefox */
-moz-animation:mymove 3s infinite;
-moz-animation-timing-function:linear;
/* Opera, Safari, Chrome */
-webkit-animation:mymove 3s infinite;
-webkit-animation-timing-function:linear;
}
You had a few mistakes with syntax and declarations in the JS part.
Hope this is what you are looking for:
https://jsfiddle.net/xrtvhvgf/2/
function flip(){
if(vlib_front.style.transform){
el.children[1].style.transform = "";
el.children[0].style.transform = "";
} else {
el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
el.children[0].style.transform = "perspective(600px) rotateY(0deg)";
}
}
var vlib_front = document.getElementById('front');
var el = document.getElementById('flip3D');
el.addEventListener('click', flip);

hide div on load

I want to create a webpage that works for js and none-js visitors. For js-visitors the start image shall fade in, so it has to be hidden before. At the moment it is hidden too late, namely when the js has loaded. I cannot hide it by default , because in this case none-js visitors will not see it. Any ideas?
HTML
<div class="startImage">...</div>
JS
$('.startImage').hide().delay(200).fadeIn(200);
You should just use css to fade the div in then.
.startImage {
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Working JSFiddle -
http://jsfiddle.net/bpzpb00q/
CSS
.startImage {
display:none;
}
HEAD
<noscript>
<style>.startImage {display:block}
</style>
</noscript>
JS
$(document).ready(function() {
$('.startImage').fadeIn(200)
});
in this case <noscript> tag would be useful, add 2 same elements and and one warp with <noscript> tag and another element with css properly display:none
<noscript>
<div class="startImage">...</div>
</noscript>
<div class="startImage forJS" style="display:none">...</div>
And target <selector> $(".startImage.forJS")
<script>
$(function(){
$('.startImage.forJS').delay(200).fadeIn(200);
})
</script>
Use the <noscript> tag for the non JavaScript users and duplicate its content for the JavaScript users.
To the duplicated content add a class modifier like .hidden to set it to display: none by default. Apply your fadeIn function to it.
If you don't like the duplication you could have the JavaScript take the content from the <noscript> tag create a DOM element from it and inject it into the page.
$(function() {
$('#box').delay(200).fadeIn();
});
.box {
width: 300px;
margin: 0 auto;
border: 1px solid #c66;
background-color: #f99;
color: #fff;
font-size: 24px;
padding: 24px;
font-family: Helvetica, Arial;
text-align: center;
}
.hidden {
display: none;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<noscript>
<div class="box">Content</div>
</noscript>
<div id="box" class="box hidden">Content</div>
I would consider using the <noscript> tag, like so:
$(window).load(function() {
$("#startImage img").css("opacity", "1");
});
#startImage img {
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
<noscript>
<style type="text/css">
#startImage img {
opacity: 1;
}
</style>
</noscript>
<style type="text/css">
#startImage img {
opacity: 0;
}
</style>
<div id="startImage">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="Hero2" />
</div>
Even though it doesn't seem to work when you run the code snippet, the following demo should work in the 5 major browsers.
if you are using the fadeIn(200) to the "startImage" class
then there is no need to hide the selector as well as not need to give delay
so
that above method is right try it

Cannot get ngAnimate to work in angular1.2

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/

Categories

Resources