javascript - angularJs animate ng-repeat entrance -
i've got simple list of countries , i'm trying them animate on entrance can't seem find what's stopping 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 perhaps clarify me? thanks
your css style working firefox. if 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); }
Comments
Post a Comment