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

问题描述

我使CSS3动画连接到 ng-repeat ，然后使用Bootstrap3显示 inline-list 我限制数量的最大3的列表显示，我有一些小问题，主要出现在Firefox（相信它或不是IE11是没有问题，哇我很惊讶）。

我有2个按钮（上一个/下一个），当我点击下一步按钮，然后从左到右滑动的动画开始做他的工作，但在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

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