angularJs 动画 ng-repeat 入口

Question

我有这个简单的国家/地区列表，我试图让它们在入口处设置动画，但我似乎找不到阻止它工作的原因？

<ul>
    <li ng-repeat="country in countries" type="country" class="slide">
       <a ui-sref="state5"> {{country.name}}</a>
    </li>
</ul>

css 文件：

.slide.ng-enter {
    transition:0.5s linear all;
    transform:translateY(-100px);
}
.slide.ng-enter.ng-enter-active {
    transform:translateY(0);
}

animate.js 文件：

countryApp.animation('.slide', [
        function() {
            return {
                enter: function(element, doneFn) {
                    jQuery(element).slideIn(1000, doneFn);
                }
            }
        }]

有人可以为我澄清一下吗？谢谢

Answer 1

您的 css 样式仅适用于 Firefox。如果你想要 chrome 使用 -webkit 前缀

.slide.ng-enter {
    transition:0.5s linear all;
    transform:translateY(-100px);
    -webkit-transition:0.5s linear all;
    -webkit-transform:translateY(-100px);
}
.slide.ng-enter.ng-enter-active {
    transform:translateY(0);
    -webkit-transform:translateY(0);
}