javascript - 是否有一种 Angular 动画方式来模拟这种 ng 类行为

Question

我尝试使用 Controller 中包含的 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)