ng-repeat'a bağlı bir CSS3 animasyonu hazırladım, ki bu da Bootstrap3 ile bir inline-list gösteriyor, listenin en fazla 3 sayısını sınırladım ve çoğunlukla çok az sorunla karşılaşıyorum. Firefox (inanıyorum ya da IE11'in problemsiz olduğuna inanıyorum, vay ben şaşırdım).
2 düğmem var (önceki/sonraki) ve Next (İleri) düğmesini tıklattığımda, soldan sağa kayma animasyonu işini yapmaya başlar, ancak Firefox'ta birden çok kez tıklatıldığında, animasyon yalnızca 2'de çalışır gibi görünür./Listenin 3'ü (temelde sağdaki son öğe, diğerleri soldan sağa kayıyorken bile kayarken her zaman ilk önce gösterilir). Bundan daha fazlasını açıklamak biraz zor, ama eğer örneği plunker'da denerseniz, etkiyi göreceksiniz.
Dediğim gibi, bu sorun yalnızca şu ana kadar sadece Firefox'ta gerçekleşiyor ve Chrome ve IE11'de tamam görünüyor.
Yine burada benim plunker
Bir print screen I etkisini görebilirsinizCSS3 Animasyon AngularJS ile doğru bir şekilde sürülmez Firefox'ta
/* Left to Right */
.animation-lr.ng-enter {
-webkit-transition: 1s ease-out all;
-o-transition: 1s ease-out all;
transition: 1s ease-out all;
-webkit-transform: translate(-100%,0);
-o-transform: translate(-100%,0);
transform: translate(-100%,0);
}
.animation-lr.ng-leave {
-webkit-transition: 0s ease-out all;
-o-transition: 0s ease-out all;
transition: 0s ease-out all;
-webkit-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.animation-lr.ng-enter.ng-enter-active {
-webkit-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.animation-lr.ng-leave.ng-leave-active {
-webkit-transform: translate(100%,0);
-o-transform: translate(100%,0);
transform: translate(100%,0);
}
CSS animasyon için sağ koduna Benim angularjs kontrolör kod sonra
<ul class="list-inline quotes">
<li ng-repeat="quote in vm.marketDisplayedQuotes | limitTo:3" class="{{vm.animationClass}} quotes quote-{{$index}}">
<span class="quote-name">{{quote.name}}</span>
<span class="quote-last">{{quote.last}}</span>
<span class="quote-change-percent {{quote.direction}}">{{quote.changePercent}}</span>
</li>
</ul>
ve
Sol plunker yapılan, "CAC" tamamen sağda (ve orada sabittir ve hareket etmiyor), kayan animasyon etkisinin tüm kısmında olmamak
sahip oldu. – PSL
Sağdaki sonuncusu, her zaman diğerlerinden önce ortaya çıkan ve hareket etmeyen sonuncuya sahip değil misiniz?Sadece – ghiscoding
Nopes'den emin olmak için diğer bilgisayarımda denemeliyim. Chrome'da olduğu kadar iyi çalıştığını görüyorum .. – PSL