I'm trying to learn how to use ngAnimate with ngRepeat, but in my example, the items are just showing up instead of animating in.
I included ngAnimate, put it as a dependency in the module, gave my ngRepeat a class of item, and created the following.
.item-ng-enter {
position: relative;
opacity: 0.0;
height: 0;
left: 10px;
}
.item-ng-enter.item-ng-enter-active {
transition: all 0.5s ease;
opacity: 1.0;
left: 0;
height: 18px;
}
Plnkr: http://plnkr.co/edit/EVFUww7dfUAJzQqth7mx
First thing, Angular adds .ng-enter and .ng-enter-active classes so .item-ng-enter and .item-ng-enter-active are incorrect. Second thing you should be adding transition definitions in .ng-animate class which is added before any other angular class:
.item.ng-animate { transition: all 0.5s ease; }
Related
I'm trying to do a slide in animation when ng-show is invoked.
The element will slide in from the right.
If I'm using 1.1.5 , it works perfectly as show in this fiddle (https://jsfiddle.net/sbcjdqwk/1/)
I understand that ng-animate has been deprecated since 1.2 and I have made the necessary adjustments for 1.5.5.
.slide.ng-enter {
position: relative;
left: -100%;
}
.slide.ng-enter.ng-enter-active {
transition: all 1s;
left: 0;
}
.slide.ng-leave {
position: relative;
left: 0;
}
.slide.ng-leave.ng-leave-active {
transition: all 1s;
left: -100%;
}
Somehow it's still not working. Could anyone please advise? Thanks!
Fiddle here: https://jsfiddle.net/xrp1h592/3/
.animate-show-hide.ng-hide-remove {
left: 100%;
position: relative;
}
.animate-show-hide.ng-hide-remove-active {
left: 0;
}
.animate-show-hide.ng-hide-add {
left: 0%;
position: relative;
}
.animate-show-hide.ng-hide-add-active {
left:100%;
}
.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
transition: ease-in-out 300ms;
}
Using ng-hide-add and ng-hide-remove solves the issue.
And using "ease-in-out" rather than "linear" makes it more smooth.
Plunkr link here:
https://plnkr.co/edit/FeX0hG6nXnVz4h3H9oow?p=preview
I suspect this is a case of not really understanding CSS3 animations, but in general, I've found Angular animation very frustrating to learn.
So to start, I have a plunker for this: http://plnkr.co/edit/VSIxhDy1qaVuF0j0pxjT?p=preview
As I'm required to show code to get a plunker link going, here's the CSS in the test situation:
#wrapper {
position: relative;
overflow: hidden;
}
#wrapper, form, #wrapper > div {
height: 400px;
width: 400px;
}
#wrapper > * {
transition: 10s linear all;
}
form {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
form.ng-hide-add-active {
top: -100%;
}
#wrapper > div {
position: absolute;
left: 0;
top: 0;
background: #66F;
}
#wrapper.ng-hide.ng-hide-remove-active {
top: 100%;
}
I have a situation where I want to make a form, and if it successfully submits, I want the form to slide up with the success message sliding up under it. The problem is that while I can get the form to slide away, the under div just appears. In fact, it works better on plunker than on my code, where it starts up shown, goes away via animation, then just reappears when the form is submitted. No idea why that's the case, but in general, Angular animations are frustrating me. I tried looking up examples, and many mention using ng-animate="'name'" to create custom classes, but that doesn't seem to work for me. Likewise, the documentation mentions an ng-hide-remove class, but I never see that getting applied.
Is there any advantage to using CSS3 transitions over creating custom animations with the animate module, and just using jQuery to do it? I understand keyframes may be the biggest advantage? This is just making it really hard to do stuff that seems relatively easy in jQuery working...
The examples using ng-animate="'name'" is for versions earlier than Angular 1.2.
For these kind of animations, vision two states for each involved element.
Visible
Hidden
You have a wrapper. Inside the wrapper you have two elements involved in the animation - a form and a div with a message. Now set up your HTML and CSS with the visible state in mind. When visible, both the form and the div should be visible inside the container.
Here is an example based on yours (changed it some for clarity):
#wrapper {
position: absolute;
height: 200px;
width: 200px;
top: 100px;
left: 100px;
border: 1px solid silver;
}
#form {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: #DDFEFF;
transition: all 1s ease-in-out;
}
#submitted {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: gold;
transition: all 1s ease-in-out;
}
Both the form and the div are as large as the wrapper and aligned to the wrappers top, which means in this state they will overlap. This is not a problem however, since they shouldn't be visible at the same time.
Now define their hidden states.
For example, the form should when hidden be located above the wrapper:
#form.ng-hide {
top: -100%;
}
And the div should when hidden be located below the wrapper:
#submitted.ng-hide {
top: 100%;
}
That should be enough but minor tweaks might be needed depending on what AngularJS version you are using.
Demo: http://plnkr.co/edit/FDJFHSaLXdoCK7oyVi7b?p=preview
I do an app with Angularjs and ui.Bootstrap
I use a $routeProvider so I have an <ng-view></ng-view> in my main page,
with animate.css, I want to animate enter and leave of my view, but bootstrap doesn't had both class ( .myclass-enter and .myclass-leave )
I don't know why?
This is not responsibility of Bootstrap to animate ng-view element. But you can easily achieve this with ngAnimate module (remember to inject it into your main app module). All you need to do is to implement couple of classes.
For example to make view slide you can write this classess:
<div ng-view class="slide"></div>
and CSS:
.slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide.ng-enter,
.slide.ng-leave {
transition: all 1s ease;
}
.slide.ng-enter {
left: 100%;
}
.slide.ng-enter-active,
.slide.ng-leave {
left: 0;
}
.slide.ng-leave-active {
left: -100%;
}
Here is some examples I put together of this approach.
thinx I think I forget vendor prefix on my css class, so it works with animate.css now
.slide.ng-enter,
.slide.ng-leave {
}
.slide.ng-enter {
animation-delay: 1s;
}
.slide.ng-enter-active {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
.slide.ng-leave {
}
.slide.ng-leave-active {
-webkit-animation-name: hinge;
animation-name: hinge;
}
I'm trying to get a height animation working using Angular JS 1.2. I've got a plunker here that has the animation working for closing the item:
http://plnkr.co/edit/YVtnXgjO3Evb6tz5DJOp?p=preview
With the key bit being this CSS here:
.accordion-body {
height: 100px;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.accordion-body.ng-hide-add,
.animate-show.ng-hide-remove {
display: block !important;
}
.accordion-body.ng-hide-add{
}
.accordion-body.ng-hide-remove{
}
.accordion-body.ng-hide {
height:0;
}
But I can't figure out how to get it to work for opening the item. I'm obviously doing something braindead - what am I missing?
Got it working with the following CSS:
.accordion-body {
height: 100px;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.accordion-body.ng-hide-add,
.accordion-body.ng-hide-remove {
display: block !important;
height: 0px;
}
.accordion-body.ng-hide-remove.ng-hide-remove-active {
height: 100px;
}
.accordion-body.ng-hide-add{
height: 100px;
}
.accordion-body.ng-hide-add.ng-hide-add-active {
height: 0;
}
You messed up a class name is all.
So I have this simple fade animation using AngularJS 1.2 and the ngAnimate module but I'm having a small issue.
I want to show/hide an element with a fade animation but I want the element to fade from opacity: 0 to opacity: 0.5. The thing is, the element fades from 0 to 0.5 within the duration period I set, but after the animation ends, it sets the opacity to 1. I don't want that.
This is my CSS code:
.overlay {
background-color: #ff0000;
position: absolute;
width: 150px;
height: 150px;
}
.fade-animation.ng-hide-add, .fade-animation.ng-hide-remove {
transition: 2s linear all;
display: block !important;
}
.fade-animation.ng-hide-remove {
opacity: 0;
}
.fade-animation.ng-hide-remove.ng-hide-remove-active {
opacity: .5;
}
.fade-animation.ng-hide-add {
opacity: .5;
}
.fade-animation.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
Here's a sample of the problem: http://jsfiddle.net/Kn3th/8/
I'm testing this on Firefox.
That's because as soon as the animation completes, the animation-related classes are removed, so only the .overlay definition applies. Just add this to your CSS:
.overlay {
...
opacity: .5; // <-- add this line to apply an opacity of 0.5
} when the animation is over
See, also, this short demo.