angularJs动画ng-repeat入口

Question

I've got this simple list of countries and I'm trying to get them to animate on entrance but I can't seem to find what's stopping this from working?

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

css file:

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

animate.js file:

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

Can someone perhaps clarify this for me? Thanks

Answer 1

your css style only working for firefox. if you want chrome use -webkit prefix

.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);
}