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.
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
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.
I just got into CSS animations with ngAnimate. Cool stuff! I'm now struggling to figure out how to control the animation of a sibling element affected by some animation.
Plunker: https://plnkr.co/edit/XqpMPklO2SDlZQ1GIJ5Z?p=preview
For example, in the above plunker, the top div animates away nicely, but the bottom div doesn't. Is there a way to also animate the bottom div when the top is animated?
div.top {
width: 100%;
background-color: red;
height: 200px;
position: relative;
transition: 1s linear all;
opacity: 1;
top: 0;
}
div.bottom {
widows: 100%;
background-color: blue;
height: 300px;
}
button {
width: 100%;
padding: 25px;
}
div.top.ng-hide {
opacity: 0;
top: -1000px;
}
The problem has to do with the top div dissapearing suddenly. Make it transition to height: 0 and the bottom div will follow it's motion.
div.top.ng-hide {
/* ... */
height: 0;
}
Plnkr Fork
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; }
I'm using ngAnimate to animate max-height for a simple slide-toggle effect, and there's something a bit strange happening: when hiding, it seems that setting the transition property on the setup class (.xxx-hide) doesn't work--the height snaps to 0 immediately:
.controls-hide {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
max-height: 5em;
opacity: 1;
}
.controls-hide.controls-hide-active {
max-height: 0em;
opacity: 0;
}
But setting it on the active class (.xxx-hide.xxx-hide-active), the animation works just fine:
.othercontrols-hide {
opacity: 1;
max-height: 5em;
}
.othercontrols-hide.othercontrols-hide-active {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
max-height: 0em;
opacity: 0;
}
(Here's the whole fiddle.)
Even more strangely, the opacity animates just fine in both cases. What's going on here?
I just follow the instructions at this site: http://www.nganimate.org/angularjs/ng-repeat/appear
And I got this fiddle working: http://jsfiddle.net/WXWSu/2/
What I changed was set the transtion tag to all changes (transition: 1s linear all;), and set the start properties at the main class:
.exercise-controls {
overflow: hidden;
border: 1px solid black;
height: 5em;
opacity: 1;
}