I'm trying to mock a refresh for a list that I have. So when a user clicks refresh, the list fades in to let users know a new GET request was made.
html
<div ng-controller="ModalDemoCtrl">
<ul ng-repeat="friend in friends" class="animated" ng-class="{fadeIn: refresh === true}">
<li>{{friend}}</li>
</ul>
<button ng-click="refresh=!refresh"> Fade me in every time </button>
</div>
css
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
and of course the js
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.friends = ['andy', 'randy', 'bambi'] ;
};
Here's a working plnkr: http://plnkr.co/edit/R0Gv2T?p=info
My issue is the way I have it, the user has to click twice to fade in the list in after clicking it once because the variable refresh has to be set back to false before being set back to true. Is there anywhere through pure css to accomplish this? I've tried setting scope variables in the controller and calling on click function but I'm just confused at this point. I'm open to any solution
For one, I'd check out angular-motion as it has all of these kinds of css animations. If not though you should hook into the ngAnimate module as it provides a great way to handle this sort of stuff using ng-hide/ng-show. So your css becomes
.fadeIn {
opacity: 0;
}
.fadeIn.ng-hide-remove {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
and your html becomes
<ul ng-repeat="friend in friends" class="animated" ng-show="refresh">
<li>{{friend}}</li>
</ul>
You may also want to provide a fadeOut animation as well and apply it using css rule .fadeIn.ng-hide
I used #PLS timeout idea but kept the ng-class and added a variable that checks if it's on or off. Then always set it to false when you click before waiting for the timeout.
$scope.friends = [{name:'andy'}, {name:'randy'}, {name:'bambi'}] ;
$scope.refresh = function(){
$scope.fadeCheck = true;
$timeout(function(){
$scope.fadeCheck = false;
}, 300);
}
and the html
<ul ng-repeat="friend in friends" class="animated" ng-class="{fadeIn: fadeCheck === false}">
<li>{{friend.name}}</li>
</ul>
http://plnkr.co/edit/Xp7E6s?p=preview
Related
I've written a function that swaps a "Menu" button with a "Close" button when clicked (hiding one div and displaying another), and vice versa. I'm struggling to add an animation to the toggle of each swap.
This is what I have:
$(document).ready(function() {
$('#menu-button').on('click', function() {
$('#menu-button').toggleClass('inactive', 1000);
$('#close-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
});
$('.close-trigger').on('click', function() {
$('#close-button').toggleClass('active').toggleClass('inactive', 1000);
$('#menu-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
});
});
I've also tried fadeIn/fadeOut/fadeToggle instead of toggleClass to no avail. The problem with fadeToggle is that both elements briefly appear at the same time, and there's still no fade animation. Is there a better way to program this?
please try this
$(document).ready(function() {
$('#button1').on('click', function() {
$('#button1').hide();
$('#button2').show().addClass('toggle');
});
$('#button2').on('click', function() {
$('#button2').hide();
$('#button1').show().addClass('toggle');
});
});
#button2
{
display:none;
}
.button.toggle
{
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="button1" class="button" >button1</button>
<button id="button2" class="button" >button2</button>
If you wish to use toggleClass, you must accompany it with a CSS transition in your stylesheet. Otherwise, the element will simply disappear, as toggleClass does not provide animation by itself.
A CSS transition would be simple to add to your stylesheet, all that would be necessary would be to place these properties on the rule for your class:
transition-property: all;
transition-duration: 0.5s; /* or however long you need it to be */
Remember that properties such as display cannot be animated, so you must control the appearance using a property such as opacity, which can be animated because it is a number.
toggleClass() doesn't allow animation. The second argument is not the time. See the docs:
http://api.jquery.com/toggleclass/
I guess the best for you would be CSS transition:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
If you don't want to use transition, that would do the thing:
$('#menu-button').on('click', function() {
$('#menu-button').hide();
$('#close-button').fadeIn();
});
$('.close-trigger').on('click', function() {
$('#close-button').hide();
$('#menu-button').fadeIn();
});
I'm trying to fade out a div and then show a new div but my code is broken. How can I fix? The fade-out animation works but the showManagement div does not appear.
HTML
<div ng-hide="hidden" ng-class="{fade: startFade}">
<p>this is start content that should be faded</p>
</div>
<div class="showManagement" ng-show="showManagement">
<p>this is the new content to be displayed once the fade is complete.</p>
</div>
JS
$scope.getManagement = function () {
$scope.startFade = true;
$timeout(function(){
$scope.hidden = true;
}, 2000);
// this is the part that doesn't display
$scope.showManagement = true;
};
CSS
.fade{
transition: opacity 3s;
opacity: 0;
}
Since you didn't provide your controller and didn't show where you call the function getManagement(), I'll assume that you want all the fade-out fade-in events show within 2 seconds after angular loaded.
Here's an example on CodePen for how you can achieve your goal with your approach.
And here's the code:
HTML
<body ng-app="myApp">
<div class="wrapper" ng-controller="MainCtrl">
<div ng-class="{fade: startFade}">
<p>this is start content that should be faded</p>
</div>
<div ng-class="{hideManagement: hideManagement, showManagement: showManagement}">
<p>this is the new content to be displayed once the fade is complete.</p>
</div>
</div>
</body>
CSS
.fade{
transition: opacity 3s;
opacity: 0;
}
.hideManagement {
opacity: 0;
}
.showManagement {
transition: opacity 3s 3s;
opacity: 1;
}
JS
angular
.module('myApp', [])
.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
$scope.startFade = false;
$scope.showManagement = false;
$scope.hideManagement = true;
$timeout(function(){
$scope.startFade = true;
$scope.showManagement = true;
$scope.hideManagement = false;
}, 2000);
}]);
A few things you have to keep in mind:
You cannot animate your display: none; and display: block; with CSS3 transition. This is the reason why ng-hide in your .showManagement is not showing with transition effect. You should keep using opacity to achieve this goal, just like you did in ng-class="{fade: startFade}"
Initialize your state at the beginning of your Angular controller. In the example your provide, it's a little bit confusing how you set your $scope.showManagement, $scope.hidden, and $scope.startFade. Once you setup your initial state like the example I provide, it would be more clear that what kind of states change you should make in the function, whether it's in a $timeout callback or some other functions trigger by other events
To make .showManagement fade-in right after the first <div> finishing it's fade-out effect, you may set the delay in css transition.
If you are doing more complex animation, you should try leveraging on ngAnimate service. With ngAnimate, you can get rid of those ng-class in this example, and simply binding your animation rules with .ng-enter, .ng-enter-active, .ng-hide, .ng-hide-active, which are automatically bind to your elements by Angular. Here's the official documentation for ngAnimate.
I am using AngularJS and Bootstrap 3. My web app has an "Update" button where it saves any changes the user makes. When the user clicks on the "Update" button, I want to activate and fade-in bootstrap's alert box saying "Information has been saved" and then fade-out after 3 seconds. I don't know how to create this function and may need some help..
UPDATE:
I have decided to use this approach:
HTML
<button type="button" class="btn btn-info" ng-click="save()">Update</button>
<div id = "alert_placeholder"></div>
JavaScript
$scope.save = function() {
$('#alert_placeholder').html('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>Your information has been updated.</span></div>')
setTimeout(function() {
$("div.alert").remove();
}, 3000);
}
I would like to make the alert box fade-in when it first appears and fade-out as it gets removed after 3 seconds, but I am not sure how to make it work with the code I have.
I use something like this. (The animation looks very pretty!). Simply add this JS, and apply the class flash to every item you want to disappear. MAKE SURE YOU ALSO ADD THE fade-in CLASS TO EVERYTHING! The fade-in class comes with bootstrap. It will fade out in 5 seconds.
window.setTimeout(function() {
$(".flash").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 5000);
Try something like this
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
-webkit-transition: opacity 3.0s linear;
-moz-transition: opacity 3.0s linear;
-o-transition: opacity 3.0s linear;
transition: opacity 3.0s linear;
}
You need to put the fade and fade.in property onto your alert box and alert box hide though. - But just set the transition times for both to match what you need. Basically what you are doing here is setting the opacity, then the length of time it is taking to do this. The reason we have 4 different values all with different times are to make it cross browser compatible.
I've used this approach to implement blinking
In a directive
..
element.addClass("blink");
$timeout(function () { element.removeClass("blink");} , 600 , false);
..
and blink is defined with transition
.blink { background-color : orange; transition : all linear 600ms; }
I have decided to use this piece of code as an alternative update indicator
http://jsfiddle.net/deC37/
<button type="button" data-loading-text="Saving..." class="btn btn-primary">Update</button>
$("button").click(function() {
var $btn = $(this);
$btn.button('loading');
// Then whatever you actually want to do i.e. submit form
// After that has finished, reset the button state using
setTimeout(function () {
$btn.button('reset');
}, 1000);
});
Hello folks at Stack Overflow from all over the world! hope you´re all doing great! I just have one inquiry today. I just found out about an awesome css3 library called animate.css http://daneden.github.io/animate.css/ which I am trying to implement with jquery mobile to custome my apps page transitions. I'm trying to go from one page to another with an animate.css class applied to the page div but after the fancy transition occured the page remains on same page and does not reach the targeted page. If anyone out there has any clue on how to achieve this, please let me know. Thanks Here the code:
CSS:
<link href="./css/animate.css" rel="stylesheet" />
Javascript:
<script language="javascript">
$(function() {
$("a#home").click(function() {
animate(".box-a", 'rotateOutDownRight');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
</script>
HTML:
<!------- HOME PAGE ---------------------------------------->
<div data-role="page" id="home" data-theme="c" class="box-a animated"> <!--Inicia pagina home -->
<div data-role="header"><h1>Animate</h1></div>
<div data-role="content">
<p><a id="home" href="#pagina2">Box A will flash, click here!</a></p>
<a id="home" href="#pagina2" data-role="button">PAGE 2 W/ANIMATION.CSS</a>
PAGE 2 W/O ANIMATION.CSS
</div> <!-- End of div content -->
<div data-role="footer" data-position="fixed"><h3>Animate</h3></div>
</div>
<!----- PAGE 2 ----------------------->
<div data-role="page" id="pagina2" data-theme="c"> <!--Inicia pagina home -->
<div data-role="header"><h1>Animate</h1></div>
<div data-role="content">
<p>PAGE 2</p>
</div> <!-- End of div content -->
<div data-role="footer" data-position="fixed"><h3>Animate</h3></div>
</div>
URL: see an example here: http://apps.alfonsopolanco.com
jQM allows you to define custom transition ( http://demos.jquerymobile.com/1.2.0/docs/pages/page-customtransitions.html ). Using animate.css for this is no problem.
Add 2 css rules that reference the desired transition from animate.css:
.customRotate.in {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: rotateInUpRight;
-moz-animation-name: rotateInUpRight;
}
.customRotate.out {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: rotateOutDownRight;
-moz-animation-name: rotateOutDownRight;
}
Then simply set the data-transition attribute on the anchor tag to the name of your new transition:
<a id="home" href="#pagina2" data-role="button" data-transition="customRotate">PAGE 2 W/ANIMATION.CSS</a>
Here is a DEMO
UPDATE: To control the speed of the transition:
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 750ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 750ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 555ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 555;
}
I have a list which I iterate over by using ng-repeat: and the user can interact with thte list items by using up-arrow and down-arrow icons and on click of them i simply change the order of the element in the "list" this is what angular suggests change the model and the changes automatically reflect in the view.
<div ng-repeat="item in list">
{{item.name}}
<div class="icon-up-arrow" ng-click="moveUp($index);"></div>
<div class="icon-down-arrow" ng-click="moveDown($index);"></div>
</div>
Logic in moveUp:-
$scope.moveUp= function(position){
var temp=list[position-1];
list[position-1]=list[position];
list[position=temp];
};
the above code works completely fine and similar is the logic for shifting the item down. But the problem that i want to resolve is how do i put animation? I know angular takes care of binding view and model on its own but is there any way to put in animation as the view is updated on pressing up an down arrow icons?
Following on from Marcel's comment: in AngularJS 1.2 you don't need to use the ng-animate directive. Instead:
Includeangular-animate[-min].js.
Make your module depend on ngAnimate.
Define your transitions in CSS using classes like .ng-enter and .ng-enter-active.
Use ng-repeat as you normally would.
HTML:
<div ng-app="foo">
<!-- Set up controllers etc, and then: -->
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
JavaScript:
angular.module('foo', ['ngAnimate']);
// controllers not shown
CSS:
li {
opacity: 1;
}
li.ng-enter {
-webkit-transition: 1s;
transition: 1s;
opacity: 0;
}
li.ng-enter-active {
opacity: 1;
}
Demo in (someone else's) Plunker.
See the docs for $animate for details on the progression through the various CSS classes.
Check this link http://www.nganimate.org/
You need to declare the ng-animate attribute to an element that have another directive that changes the DOM
div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"
You need to add css transitions or animation.
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
You can check plnkr example here: http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM
Complementing the last answer, there is the ng-move class for animations when order is changed:
li {
opacity: 1;
}
li.ng-move {
-webkit-transition: 1s;
transition: 1s;
opacity: 0;
}
li.ng-move-active {
opacity: 1;
}
Last documentation here.
If you don’t wish to use ‘ngAnimate’ module because of reduce the plugins count, you can archive the simple transition effect by using ng-init and custom directives.
<li ng-repeat="item in items" class="item" item-init>{{item.name}}</li>
.item{
opacity:0;
-webkit-transition: all linear 300ms;
transition: all linear 300ms;
}
.item.visible{
opacity:1;
}
myApp.directive('itemInit', function ($compile) {
return function (scope, element, attrs) {
scope.initItem(element);
};
});
In you controller
$scope.initItem = function(el){
$timeout(function(){
angular.element(el).addClass('visible');
},0);
}