I have used ngAnimateSwap to translate elements horizontally, vertically. However are other types of animations supported, such as opacity (fade-in and fade-out?)
When I modify the example that appears here animateSwap to use opacity instead of the top value, then the animation does not occur. Is this expected?
I was able to get it working using opacity. You have to play around with the css and understand what css element does what. Here's a plunkr of animateSwap being used with an opacity transition.
The original css is:
.swap-animation.ng-enter {
top:-250px;
}
.swap-animation.ng-enter-active {
top:0px;
}
.swap-animation.ng-leave {
top:0px;
}
.swap-animation.ng-leave-active {
top:250px;
}
I changed that to the following and I now have a crossfade working just fine:
.swap-animation.ng-enter {
top:0px;
opacity:0;
}
.swap-animation.ng-enter-active {
top:0px;
opacity:1;
}
.swap-animation.ng-leave {
top:0px;
opacity:1;
}
.swap-animation.ng-leave-active {
top:0px;
opacity:0;
}
Related
Where should I put react transition group style classes in my scss ? I want to animate fading. After inspecting it in action I clearly see the classes attached, but with no effect. I think I treid putting them almost everywhere.
Anyone with experience ?
#transitionGroupDiv{
// gallery styles etc.
// NOT WORKING HERE
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 10000ms ease-out;
}
.fade-leave {
opacity: 1;
}
.fade-leave-active {
opacity: 0;
transition: opacity 10000ms ease-out;
}
.element{
// other styles etc.
}
}
I actually was not aware of scss rules. You have to use the parent selector reference &.
Example in this question: SO question.
I have referred so many answers for this but the problem is we have already written so many things in our web app. and now i want to add animation for ng-if across all without going and adding classes to all ng-if divs.
So what can be best approach to do it.
Define the animation you want for all elements with ng-if in CSS like you normally would.
For example:
.my-animation.ng-enter,
.my-animation.ng-leave {
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.my-animation.ng-enter,
.my-animation.ng-leave.ng-leave-active {
opacity: 0;
}
.my-animation.ng-leave,
.my-animation.ng-enter.ng-enter-active {
opacity: 1;
}
Add a directive that adds the my-animation class to all elements with ng-if:
app.directive('ngIf', function() {
return {
compile: function(tElement) {
tElement.addClass('my-animation');
}
}
});
Demo: http://plnkr.co/edit/p88E3VxVdPw0WWpbfJXG?p=preview
In parent template I'm specifying ui-view where the child view should appear, I also include animation, like this:
<div class="am-fade-and-slide-bottom" ui-view></div>
So I want animation to appear when something has been put ten in this view. And it works! And if I remove that ui-view (well, go to the previous state when using ui-router), I get animation of hiding that view.
The problem is, that when I'm changing the content of ui-view, I get repeated animations of hiding-and-showing, though I want to to stay without animation this time (as I have loading indicator on the template which goes inside ui-view).
How would I do that?
This is class .am-fade-and-slide-bottom from the Angular Motion library:
.am-fade-and-slide-bottom {
animation-duration: #fade-and-slide-duration;
animation-timing-function: #fade-and-slide-timing-function;
animation-fill-mode: backwards;
&.am-fade-and-slide-bottom-add, &.ng-hide-remove, &.ng-move {
animation-name: fadeAndSlideFromBottom;
}
&.am-fade-and-slide-bottom-remove, &.ng-hide {
animation-name: fadeAndSlideToBottom;
}
&.ng-enter {
visibility: hidden;
animation-name: fadeAndSlideFromBottom;
animation-play-state: paused;
&.ng-enter-active {
visibility: visible;
animation-play-state: running;
}
}
&.ng-leave {
animation-name: fadeAndSlideToBottom;
animation-play-state: paused;
&.ng-leave-active {
animation-play-state: running;
}
}
}
How can I make angular bootstrap collapse, collapsing horizontally?
Something like here?
You are going to need to either modify the collapse directive or create a new directive based on that to handle collapsing the width only. I would suggest the latter unless you want all of the collapse directives in your app to collapse horizontally.
Please see the Plunk here demonstrating the use of a collapse-with directive based on the bootstrap collapse directive.
On top of changing the directive you will need to add new classes to handle the transition and set a width for the element you want to collapse (you could also change the directive to collapse to and from 100% width, not sure on your use case but hopefully you get the idea):
.well {
width: 400px;
}
.collapsing-width {
position: relative;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
And the directive just requires a few changes to the expand, expandDone, collapse and collapseDone functions and adding/removing the css class above as follows:
.directive('collapseWidth', ['$transition', function ($transition, $timeout) {
return {
link: function (scope, element, attrs) {
var initialAnimSkip = true;
var currentTransition;
function doTransition(change) {
var newTransition = $transition(element, change);
if (currentTransition) {
currentTransition.cancel();
}
currentTransition = newTransition;
newTransition.then(newTransitionDone, newTransitionDone);
return newTransition;
function newTransitionDone() {
// Make sure it's this transition, otherwise, leave it alone.
if (currentTransition === newTransition) {
currentTransition = undefined;
}
}
}
function expand() {
if (initialAnimSkip) {
initialAnimSkip = false;
expandDone();
} else {
element.removeClass('collapse').addClass('collapsing-width');
doTransition({ width: element[0].scrollWidth + 'px' }).then(expandDone);
}
}
function expandDone() {
element.removeClass('collapsing-width');
element.addClass('collapse in');
element.css({width: 'auto'});
}
function collapse() {
if (initialAnimSkip) {
initialAnimSkip = false;
collapseDone();
element.css({width: 0});
} else {
// CSS transitions don't work with height: auto, so we have to manually change the height to a specific value
element.css({ width: element[0].scrollWidth + 'px' });
//trigger reflow so a browser realizes that height was updated from auto to a specific value
var x = element[0].offsetHeight;
element.removeClass('collapse in').addClass('collapsing-width');
doTransition({ width: 0 }).then(collapseDone);
}
}
function collapseDone() {
element.removeClass('collapsing-width');
element.addClass('collapse');
}
scope.$watch(attrs.collapseWidth, function (shouldCollapse) {
if (shouldCollapse) {
collapse();
} else {
expand();
}
});
}
};
}]);
You may need to tweak the css a little to ensure the spacing and margins are consistent with your use cases but hopefully that helps.
I have used the example on
http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
I am able to get the animations to work. But I would like to ONLY have the leave animation. Is there a way to do it? I have tried to get rid of the .repeat-item.ng-enter in my css, unfortunately did not work. Any insights?
Thanks!
My Javascript:
<tr ng-repeat="item in m.itemList" class="repeat-item">
My CSS:
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition:1s linear all;
transition:1s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity:1;
}
My updated CSS:
.repeat-item.ng-leave {
-webkit-transition:1s linear all;
transition:1s linear all;
}
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave{
opacity:1;
}
In my updated CSS, I got rid of anything related to ng-enter but still got the animation for entering.
For me It's working !
here is a working example
.repeat-item.ng-leave {
-webkit-transition:1s linear all;
transition:1s linear all;
}
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave{
opacity:1;
}