对 AngularJS 填充的 div 内容进行动画处理，而无需 jQuery

Question

我有一个这样的div：

<div class="row">
    <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>

我在angularjs中创建警报（并且我正在使用bootstrap），虽然这很好用，但视觉效果有点不酷。 将警报添加到div 时，所有页面内容都会被不优雅地向下推，以便为新警报腾出空间。

我想对运动进行动画处理，使其至少是平滑的。 但我不想使用jQuery。 我已经尝试过 CSS3 过渡，但似乎无法让它们顺利运行。

我可以在触发器是div 高度变化的情况下执行此操作吗？ 如何？

Answer 1

您可以使用

其链接函数中的指令来完成此操作。 我想你不会介意jquery代码上的这么小部分

myModule.directive('animateRight', function () {
    var linker = function (scope, element, attrs) {
        var right = function() {
            $(this).animate({
                {"height": "800px"},
                "fast");
            })
        }
        element.on('click', right);
    };
     return {
    restrict:'A',
    link:linker
}
})

<div animate-right class="box"></div>

Answer 2

好的，所以我不喜欢回答我自己的问题，但这似乎是这样做的方法......

我使用了AngularJS 1.2以及新的ngAnimate模块。 您需要添加 angular-animate.js，并引用 animate 模块，所以最后这是我的模块的样子：

var app = angular.module('tracker', ['$strap.directives', 'ui.bootstrap', 'ngRoute', 'ngAnimate']);

之后，它超级简单，而且非常多的CSS3动画。 我的警报行最终以类repeat-item结束：

<alert class="repeat-item" type="alert.type" data-ng-repeat="alert in alerts" close="closeAlert($index)">{{alert.msg}}</alert>

我添加了一些 CSS 来使用 angularjs 触发器来定位该类：

.repeat-item.ng-enter,
.repeat-item.ng-leave {
    -webkit-transition: 0.2s linear all;
    -moz-transition: 0.2s linear all;
    -o-transition: 0.2s linear all;
    transition: 0.2s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
    opacity: 0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
    opacity: 1;
}

voila一个漂亮的淡入淡出动画。

这个页面真的很好地解释了如何做到这一点。为迈克尔·本福德的伟大联系干杯。