CSS3动画与AngularJS不能在Firefox正常滑动 [英] CSS3 Animation with AngularJS not sliding correctly in Firefox

问题描述

我做了连接到 A CSS3动画NG-重复，然后给出了一个直列列表与Bootstrap3，我有限的名单显示出最大的3号和我有大多出现在Firefox中的一些小问题（不管你信不信IE11是没有问题的，哇，我很惊讶）。
结果我有2个按钮（previous一个/下），当我点击下一步按钮，然后从左至右开始做他的工作滑动的动画，但在Firefox点击多次的时候，似乎动画仅适用于列表（基本上是在右边的最后一个项目总是先出现，而没有其他从左滑向右滑动连）的2/3。这是一个有点难以解释以外，但如果您尝试在 plunker的例子​​你就会看到效果。
搜索结果正如我所说的只出现这个问题，到目前为止，只有在Firefox和Chrome浏览器和IE11似乎确定。
搜索结果再这里是我的 plunker
搜索结果我的AngularJS控制器code

I made a CSS3 animation connected to an ng-repeat which then shows an inline-list with Bootstrap3, I limited the number of maximum 3 of the list showing and I have some little issues with appears mostly in Firefox (believe it or not IE11 is without issues, wow I was surprised).
I have 2 buttons (previous/next) and when I click the Next button then the animation of sliding from left to right start to do his job, but in Firefox when clicking multiple times, it seems that the animation only works on 2/3 of the list (basically the last item on the right always show up first without even sliding while the others are sliding from left to right). It's a little hard to explain other than that, but if you try the example in the plunker you will see the effect.

As I said this problem only occurs, so far, only in Firefox and seems ok in Chrome and IE11.

Again here is my plunker

My AngularJS controller code

<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>

，然后从左向右code为CSS动画

and then the Left to Right code for the CSS animation

/* 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);
}

您可以看到在打印屏幕我从plunker取得了效果，CAC是完全正确的（并且有固定不动），不是在滑动动画效果的结果<一部分BR>

You can see the effect in a print screen I made from the plunker, "CAC" is completely on right (and is fixed there and is not moving), not being at all part of the sliding animation effect

推荐答案

您更好的使用角UI库，将工作非常好，carasoul，我是有这个问题我自己

You better use angular-ui library that will work very well with carasoul, i was myself having this issue

这篇关于CSS3动画与AngularJS不能在Firefox正常滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！