带有 AngularJS 的 CSS3 动画在 Firefox 中无法正确滑动 [英] CSS3 Animation with AngularJS not sliding correctly in Firefox

问题描述

我制作了一个连接到 ng-repeat 的 CSS3 动画，然后用 Bootstrap3 显示一个 inline-list，我限制了列表中最多 3 个显示和我有一些小问题主要出现在 Firefox 中(信不信由你，IE11 没有问题，哇，我很惊讶).
我有 2 个按钮(上一个/下一个)，当我单击 Next 按钮时，从左到右滑动的动画开始完成他的工作，但是在 Firefox 中多次单击时，似乎动画只适用于列表的 2/3(基本上右边的最后一项总是最先出现，甚至没有滑动，而其他项则从左向右滑动).除此之外有点难以解释，但是如果您尝试 plunker 中的示例，您会看到效果.

正如我所说，这个问题目前只发生在 Firefox 中，在 Chrome 和 IE11 中似乎没问题.

这里又是我的 plunker

我的 AngularJS 控制器代码

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>

然后是 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"完全在右边(并且固定在那里并且不动)，完全不是滑动动画效果的一部分

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

推荐答案

你最好使用 angular-ui 库，它可以很好地与 carasoul 配合使用，我自己也有这个问题

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

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