是否有一种 angular 动画方式来模拟这种 ng-class 行为

Question

我尝试使用控制器中包含的 ng-animate app = angular.module('Packs', ['ngAnimate']); 这是我的风格：

<style>
    .animate-in {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
    .animate-out{
        opacity: 1;
        max-height: 200px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }
</style>

这是无法正常工作的 html，好吧，它确实有效，只是我不得不手动切换类，我想使用 ng-animate

<div ng-click="toggle('pack1')">
    <div class="text" 
        ng-class="{'animate-in' : !displays.pack1,
               'animate-out' : displays.pack1}">
                            Some text to toggle
    </div>
</div>

Answer 1

是的，在您的文本中使用 ng-show = "displays.pack1"，然后使用特殊的类 ng-hide/ng-hide-active，请参见示例 in the documentation

这是一个 jsfiddle，显示了不透明度和高度的切换：http://jsfiddle.net/1djeqjfm/1/

.box.ng-hide { opacity:0; }
.box.ng-hide-active { opacity:1; }

(或使用ng-if及其类ng-enter/ng-leave)

是否有一种 angular 动画方式来模拟这种 ng-class 行为

Is there an angular animate way to emulate this ng-class behaviour

javascript

css

angularjs

ng-animate