Problem with css animation. Slide effect

[Олег Истомин]

HTML+CSS work good: http://jsfiddle.net/tamtakoe/XbMMa/598/

Angular+CSS – bad: http://jsfiddle.net/tamtakoe/PJNzc/1/

Expand animation is broken, double click doesn't work periodically

[Michał Zielenkiewicz]

You could check in a dev tools how ng-animation toggle classes in different states of animation and how ng-show change the css display property.

In your case ng-class is enough, there is ng-init for your vis variable (but if it's already in a controller you can omit ng-init)

<div ng-app="">
    <a href="#" ng-init="vis=false" ng-click="vis = !vis">Toggle</a><br/>
    <ul class="ng-class: {true: 'menu-show-setup', false: 'menu-hide-setup'}[vis]">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

<style>
.menu-show-setup, .menu-hide-setup {
  transition:all 0.5s ease-out;
  overflow:hidden
}

.menu-show-setup {
  max-height:200px;
}

.menu-hide-setup {
  max-height:0px;
}
</style>

[Олег Истомин]

I try make it with ng-animate: http://jsfiddle.net/tamtakoe/fbZda/, but have same bugs and broken animation. How make slide animation with ng-animate?

среда, 22 мая 2013 г., 15:37:45 UTC+3 пользователь Michał Zielenkiewicz написал:

[Олег Истомин]

P.S. Michał Zielenkiewicz, thank for your decision

среда, 22 мая 2013 г., 15:37:45 UTC+3 пользователь Michał Zielenkiewicz написал:

You could check in a dev tools how ng-animation toggle classes in different states of animation and how ng-show change the css display property.