angular animation not working - angularjs

I am new AngularJS.I am not able to apply animations to my text and button. I am not getting any error in the console. i have no idea where its going wrong. I want different animations to my text and button. I have provided css animation link in the html. here is my html page. please help me to know whether i am applying animation in a right way or not .
<!doctype html>
<html ng-app="MyApp" >
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bounceOut.css">
<link rel="stylesheet" href="zoomIn.css">
</head>
<body ng-controller="MyCtrl">
<h3 class="bounceOut">I am</h3> </div>
<button type="submit" class="OptionButton zoomIn">
Submit
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
<script>
var app = angular.module("MyApp", ["ngAnimate"]);
app.controller('MyCtrl', function($scope) {
});
</script>
</body>
</html>
here is my bounceOut animation css code
#keyframes bounceOut {
20% {
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}
.bounceOut {
animation-name: bounceOut;
}
here is my zoomIn animation css code
#keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
animation-name: zoomIn;
}


Seems you are usgin css3 animation and not angularjs animation. If I percive wrong please tell me but this should work,
/* Styles go here */
.zoomIn {
animation: zoomInf 5s infinite;
-webkit-animation: zoomInf 5s infinite;
}
#keyframes zoomInf {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#-webkit-keyframes zoomInf {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
-webkit-transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#keyframes bounceOutf {
20% {
transform: scale3d(.9, .9, .9);
}
50%,
55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}
#-webkit-keyframes bounceOutf {
20% {
-webkit-transform: scale3d(.9, .9, .9);
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
}
}
.bounceOut {
animation: bounceOutf 5s infinite;
-webkit-animation: bounceOutf 5s infinite;
}

Related

How to put a spinner inside of the button in React?

See current Spinner
Hello,
I like to put the current spinner inside the Login button, but it is located outside of the button. Any help? Thank you in advance!
Here are my codes.
[Login.js] try to load when user clicks the Login button.
...
<div className="auth-form-inputLine auth-form-submitBtn-container" id="auth-login-submitBtnContainer">
<button onClick={this.handleFormSubmit} className="auth-form-submitBtn">
{this.state.submitting ? <ButtonLoader /> : <h2 className="text">Login</h2>}
</button>
</div>
...
[ButtonLoader.js] There are moving three dots.
import React from "react";
import "./styles/ButtonLoader.css";
const ButtonLoader = () => {
return (
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
);
};
export default ButtonLoader;
[ButtonLoader.css]
.spinner {
margin: 100px auto 0;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
#keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}

animation css3 flickering issue in Internet explorer 11 with ng-hide

Please take a look at this (https://dev.smartbothub.com/4444/v1/api/Dev-master_bot/getBot) in IE 11.Click on a dropdown button on the right side of the webchat screen on sliding down the webchat flickers.
Here is the css used for animation.
.animate-slide.ng-hide-remove.ng-hide-remove-active {
-webkit-animation: 0.5s slide-up;
animation: 0.5s slide-up;
}
.animate-slide.ng-hide-add.ng-hide-add-active {
-webkit-animation: 0.5s slide-down;
animation: 0.5s slide-down;
}
#-webkit-keyframes slide-up {
from {
height: 0;
}
to {
height: 80%;
}
}
#keyframes slide-up {
from {
height: 0;
}
to {
height: 80%;
}
}
#-webkit-keyframes slide-down {
from {
height: 80%;
}
to {
height: 0;
}
}
#keyframes slide-down {
from {
height: 80%;
}
to {
height: 0;
}
}
This only seems to happen in IE11. I'm using angular 1.5 Please help me with this issue.

ReactCSSTransitionGroup simple example

I have been using ReactCSSTransitionGroup for basic animations - like slide in from left to right and right to left 2 images, but not able to acheive it - what am I missing here - the images animate but go back to their original position as soon as the animation is over - it is not looking good on the screen.
<ReactCSSTransitionGroup transitionName="square1" transitionAppear transitionEnterTimeout={1000}>
<img key={this.state.altText} alt="image" className="square-1" src="/images/sqr.svg" />
</ReactCSSTransitionGroup>
<ReactCSSTransitionGroup transitionName="square2" transitionAppear transitionEnterTimeout={1000}>
<img key={this.state.altText} alt="image" className="square-2" src="/images/sqr2.svg" />
</ReactCSSTransitionGroup>
css:
.square-1{
opacity: 0.4;
float:left;
position: absolute;
top:60px;
width: 150px;
left:-35px;
}
.square-2{
opacity: 0.4;
float:right;
width: 150px;
position: absolute;
right:-10px;
top:30px;
}
.square1{
position: absolute;
border:1px solid green;
left:10px;
top:90px;
}
.square1-appear {
opacity: 0.01;
transition: all 2s linear;
position:absolute;
left:-200px;
}
.square1-appear.square1-appear-active {
opacity: 0.4;
transition: all 2s ease-in;
position:absolute;
left:-30px;
top:-10px;
}
.square1-leave.square1-leave-active{
border:1px solid red;
}
.square2{
position: absolute;
right:10px;
top:30px;
}
.square2-appear {
opacity: 0.01;
transition: all 4s ease-in;
position:absolute;
right:-200px;
}
.square2-enter {
opacity: 0.01;
position:absolute;
right:-400px;
}
.square2-appear.square2-appear-active {
opacity: 0.8;
transition: all 2s ease-in;
position:absolute;
right:100px;
}

Angular JS - Animating md-chips element on enter and leave

I'm trying to animate chips created by md-chips, angular-material, but it does not work.
here is my css codes:
#-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
#keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.md-chip.ng-enter {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
.md-chip.ng-leave {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
and HTML:
<md-chips class="custom-chips" ng-show="elems.length" ng-model="elems" readonly="true">
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
<button md-chip-remove class="md-primary">
<md-icon md-svg-icon="md-close"></md-icon>
</button>
</md-chips>
but no animation showing and everything goes normal!
I read some tutorials and whatever they said step by step but i think it's not gonna work with md-chips work some reasons.

You need to specify a duration, for example:
.md-chip.ng-enter {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
Or simply:
.md-chip.ng-enter {
-webkit-animation: zoomIn 1s;
animation: zoomIn 1s;
}
Demo: http://plnkr.co/edit/L36jyc3WFW9cRuu4Cybs?p=preview

To elaborate on tasseKATT's answer, if you add max-height property to the animation to go from max-height: 0px; to max-height: 50px; (for example), then the content will not be so jumpy when a the last chip from a row is removed, or when another chip is added and it creates another row.
See sample below for css and the demo on Plunker (just a fork):
#-webkit-keyframes zoomIn {
from {
max-height: 0px;
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
max-height: 50px;
opacity: 1;
}
}
#keyframes zoomIn {
from {
max-height: 0px;
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
max-height: 50px;
opacity: 1;
}
}
#-webkit-keyframes zoomOut {
from {
max-height: 50px;
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
max-height: 0px;
opacity: 0;
}
}
#keyframes zoomOut {
from {
max-height: 50px;
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
max-height: 0px;
opacity: 0;
}
}
.md-chip.ng-enter {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation: zoomIn 1s;
animation: zoomIn 1s;
}
.md-chip.ng-leave {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}

lock a page/form using $animate. angularjs

I need to create a form locker with progress bar or spinner dynamically .
https://github.com/chieffancypants/angular-loading-bar/blob/master/src/loading-bar.css has the code for the spinner but it just displays the spinner and not locking the form..
Is there any way to lock the form page once the spinner is loaded so that no more actions are done .
start the spinner
this.parentSelector = 'body';
var $parentSelector = this.parentSelector,
var $parent = $document.find($parentSelector);
spinner = angular.element('<div id="loading-bar-spinner"><div class="spinner-icon"></div></div>');
{
$animate.enter(spinner, $parent);
}
css :
#loading-bar-spinner {
pointer-events: none;
-webkit-pointer-events: none;
-webkit-transition: 350ms linear all;
-moz-transition: 350ms linear all;
-o-transition: 350ms linear all;
transition: 350ms linear all;
}
#loading-bar.ng-enter,
#loading-bar.ng-leave.ng-leave-active,
#loading-bar-spinner.ng-enter,
#loading-bar-spinner.ng-leave.ng-leave-active {
opacity: 0;
}
#loading-bar.ng-enter.ng-enter-active,
#loading-bar.ng-leave,
#loading-bar-spinner.ng-enter.ng-enter-active,
#loading-bar-spinner.ng-leave {
opacity: 1;
}
#loading-bar-spinner {
display: block;
position: fixed;
z-index: 10002;
top: 300px;
left: 200px;
}
#loading-bar-spinner .spinner-icon {
width: 14px;
height: 14px;
border: solid 22px yellow;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 120px;
-webkit-animation: loading-bar-spinner 400ms linear infinite;
-moz-animation: loading-bar-spinner 400ms linear infinite;
-ms-animation: loading-bar-spinner 400ms linear infinite;
-o-animation: loading-bar-spinner 400ms linear infinite;
animation: loading-bar-spinner 400ms linear infinite;
}
#-webkit-keyframes loading-bar-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
#-moz-keyframes loading-bar-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
#-o-keyframes loading-bar-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
#-ms-keyframes loading-bar-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
#keyframes loading-bar-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}

I recomend using open-source on those components.
I have good experience with blockUI.
Features:
You can add your own spinner.
You can decide to run the spinner on each server call(by default) or you can control it youself.
It's super simple to integrate\config as a module.

Resources