1

我有一个这样的div：

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

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

我想为运动设置动画，使其至少平滑。但我不想使用 jQuery。我玩过 CSS3 过渡，但似乎无法让它们顺利工作。

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

4

2 回答 2

0

您可以使用其链接功能中的指令来完成。我想你不会介意 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>
于 2013-09-05T18:58:50.827 回答
0

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

我使用了 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一个很好的淡入淡出动画。

这个页面真的很好地解释了如何去做。为 Michael Benford 的出色链接干杯。

于 2013-09-05T22:37:30.873 回答