CODEWITHSUNDEEP
angularjscss-transitionscss-animations
g00fy
g00fy

Reputation: 4737

AngularJS - CSS3 animation of height (auto) - sometimes works

I want to animate an element, that I don't know the actual height, that's why I am using the trick with max-height.

the css is pretty simple:

.animate-enter-setup, .animate-leave-setup {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  overflow: hidden;
}

.animate-enter-setup {
  opacity:0;
  max-height: 0;
}
.animate-enter-setup.animate-enter-start {
  max-height: 200px;
  opacity:1;
}

.animate-leave-setup{
  opacity:1;
  max-height: 200px;
}
.animate-leave-setup.animate-leave-start {
  opacity:0;
  max-height: 0;
}

In the example here: http://plunker.co/edit/AoirGQoOKsflunxj9RGV?p=preview the leave animation get's only applied when the item didn't finish previous enter animation. When the item did finish enter animation, the leave animation doesn't get applied (well it does as a class but there is no visual efect).

I suspect there is something wrong with the CSS rather than in angular. But I have no idea what would that be.

Upvotes: 3

Views: 3588

Answers (1)

g00fy
g00fy

Reputation: 4737

It turns out, that if you want to use the max-height trick, then the element that you want to animate must have defined max-height and overflow:hidden (not only on animation class)

The strange thing here is that the setup animation class doesn't get applied by the browser even it is on the element.

updated example: http://plunker.co/edit/qnEFDhAyGqhsJdCGrF71?p=preview

I think this may be a bug either in angular or chrome.

Upvotes: 1

Related Questions