Question

我正在使用animate.css在我的网站上做一些动画，但我希望在另一个结束后立即发生某个动画，例如我有这个css：

.pageRenderer.ng-enter{
    animation:  fadeIn 1s;
}

.pageRenderer.ng-leave{
    animation: bounceOutLeft 1s;
}

这个简单的HTML：

 <div ng-repeat='page in pages' style='position:relative'>
                <div ng-if="$index == pageToShow" class='pageRenderer'>
                    <h2>{{page.title}}</h2>
                    <div ng-repeat='quest in page.quests'>
                        <div ng-switch on="quest.ui.type">
                            <div ng-switch-when="ms-select-single" >
                                <div ms-select-single quest='quest'></div>
                            </div>
                           ...
                        </div>
                    </div>
                </div>

当我转向下一页时（我有一个按钮可以执行此操作），我首先想要离开我的工作并离开，而不仅仅是输入，而不是同时...

是否可以不使用角度？如果没有，我的选择是什么？

Answer 1

您可以尝试不同的解决方案：

为ng-leave类添加延迟

animation-delay: 1s;

当ng-enter处于活动状态并且ng-leave处于活动状态时放置动画（不确定此解决方案，我通常使用过渡而不是动画，但试一试）

.pageRenderer.ng-enter.ng-enter-active {
    animation:  fadeIn 1s;
}

.pageRenderer.ng-leave.ng-leave-active {
    animation: bounceOutLeft 1s;
}

我怎么能等待动画以angular.js结束

1 个答案: