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>
Related
Todo :
Hide an element smoothly after clicking on it , like in this page https://www.alphafx.co.uk/ , when you click on the letter A it fades away smoothly
Achieve this effect with just HTML,CSS,JavaScript ?
var foo = document.getElementById('foo');
document.getElementById('hide-button').onclick = function () {
foo.className = 'hidden';
};
document.getElementById('show-button').onclick = function () {
foo.className = '';
};
#foo {
transition-property: visibility, opacity;
transition-duration: 0s, 1s;
}
#foo.hidden {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 1s, 0s;
transition-delay: 0s, 1s;
}
Text
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>
You can achieve this using jQuery fadeOut check working fidle below:
Using jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
.hide {
font-size: 150%;
cursor: pointer;
text-align: center;
}
h1 {
text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="hide">
<h1>A</h1>
<p>
If you click on this paragraph you'll see it just fade away.
</p>
</div>
<script>
$(".hide").click(function() {
$(".hide").fadeOut("slow");
});
</script>
</body>
</html>
Using JavaScript
function fadeOutEffect() {
var fadeTarget = document.getElementById("hide");
var fadeEffect = setInterval(function() {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("hide").addEventListener('click', fadeOutEffect);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
#hide {
font-size: 150%;
cursor: pointer;
text-align: center;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="hide">
<h1>A</h1>
<p>
If you click on this paragraph you'll see it just fade away.
</p>
</div>
</body>
</html>
You can easily achieve this using jQuery fadeOut() effect.
Below is the w3scool reference:
https://www.w3schools.com/jquery/eff_fadeout.asp
Click on "try it yourself>" button and you can modify the code as per your requirement.
Here is another working example for you:
https://jsfiddle.net/kag4jqyh/
Please try this:
$(function() {
$('#spantext').on('click', function() {
// $(this).hide();
$(this).fadeOut("slow"); // if you want to hide it slow
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spantext">this is a text</span>
Here's an answer in vanilla JavaScript (without using jQuery)
HTML
Text
<br />
<button id="hide-button" onclick="hideButton()">Hide</button>
<button id="show-button" onclick="showButton()">Show</button>
JavaScript
const hideButton = () => {
document.getElementById("foo").classList.add('hidden');
}
const showButton = () => {
document.getElementById("foo").classList.remove('hidden');
}
CSS
.foo {
transition-property: visibility, opacity;
transition-duration: 0s, 1s;
}
.foo.hidden {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 1s, 0s;
transition-delay: 0s, 1s;
}
What you want is just an animation to hide the view.
You can use <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> for getting such beautiful effects. You can see the sample code below.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({opacity: 0});
});
$("#btn2").click(function(){
$("#box").animate({opacity: 1});
});
});
</script>
</head>
<body>
<button id="btn1">Animate</button>
<button id="btn2">Reset</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
</body>
if you want to use JavaScript rather than using jQuery. then
Try this
/******define time-delay only in s(seconds)****/
var timeSlot = '.3s';
function hide(obj){
obj.style.visibility= 'hidden';
obj.style.opacity= 0.8;
obj.style.transition= 'visibility 0s linear'+timeSlot+', opacity '+timeSlot+' linear';
}
.div1 {
font-size: 1.2rem;
cursor: pointer;
text-align: center;
margin-top:-100px;
}
.logo {
font-size: 10rem;
}
<div class="div1" onclick="hide(this);">
<h1 class="logo">A</h1>
</div>
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>
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.
I'm trying to slide a menu and container either left or right using css3 translate. But on clicking on toggle, the menu span appears to slide pretty fast and the container appears to slide to left slowly. Have I written the css styles properly ?
CSS
.animate-left,.animate-left-container {
transition: all .6s ease-out 0.2s;
}
.animate-left-container {
-webkit-transform: translateX(0px);
}
.animate-right,.animate-right-container {
transition: all .6s ease-in 0.2s;
}
.animate-right-container {
-webkit-transform: translateX(0px);
}
.animate-left {
-webkit-transform: translateX(-45px);
margin-left: -45px;
}
.animate-right{
-webkit-transform: translateX(0);
margin-left: 0px;
}
JS
var container = $(".app-data-container").children();
$('.nav-toggle-button-container').on('click',function(e){
var x = $(container[0]), y= $(container[1]);
if(x.hasClass('animate-left') && y.hasClass('animate-left-container')) {
x.removeClass('animate-left').addClass('animate-right');
y.removeClass('animate-left-container').addClass('animate-right-container');
}else if(x.hasClass('animate-right')){
x.removeClass('animate-right').addClass('animate-left');
y.removeClass('animate-right-container').addClass('animate-left-container');
}else{
x.addClass('animate-left');
y.addClass('animate-left-container');
}
});
Demo : http://jsfiddle.net/2b9e8bq9/
It took a little bit, but I created an example which I hope helps and can, perhaps, simplify your code overall.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8">
<style type="text/css">
.rate-100pxs, .rate-200pxs {
-webkit-transition: all 1s ease 0;
-moz-transition: all 1s ease 0;
-o-transition: all 1s ease 0;
transition: all 1s ease 0;
}
#cell-1, #cell-2 {
display:inline-block;
position:relative;
width:200px;
}
h1 {
white-space:pre;
font-size:20px;
}
.animation-box {
position:relative;
background:#eee;
}
.animation-box .rate-200pxs {
left:200px;
}
.animation-box:hover .rate-200pxs {
left:0px;
}
.animation-box .rate-100pxs {
left:200px;
}
.animation-box:hover .rate-100pxs {
left:100px;
}
</style>
</head>
<body>
<h1>Distance: 200px Duration: 1s Rate:200 px/s</h1>
<div class="animation-box">
<div id="cell-1" class="rate-200pxs">Cell 1</div><div id="cell-2" class="rate-200pxs">Cell 2</div>
</div>
<h1>Distance: 100px/200px Duration: 1s Rate:100 px/s & 200 px/s</h1>
<div class="animation-box">
<div id="cell-1" class="rate-100pxs">Cell 1</div><div id="cell-2" class="rate-200pxs">Cell 2</div>
</div>
</body>
</html>