带有 AngularJS 的 CSS3 动画在 Firefox 中不能正确滑动

Posted 2023-03-06

【中文标题】带有 AngularJS 的 CSS3 动画在 Firefox 中不能正确滑动

【英文标题】：CSS3 Animation with AngularJS not sliding correctly in Firefox

【发布时间】：2014-11-15 21:03:43

【问题描述】：

我制作了一个连接到ng-repeat 的 CSS3 动画，然后用 Bootstrap3 显示了一个 inline-list，我限制了列表中最多显示 3 个的数量，并且我有一些小问题，主要出现在 Firefox 中（相信它或不是 IE11 没有问题，哇，我很惊讶）。 我有 2 个按钮（上一个/下一个），当我单击“下一个”按钮时，从左到右滑动的动画开始执行他的工作，但在 Firefox 中单击多次时，动画似乎只适用于列表的 2/3（基本上右边的最后一项总是首先出现，甚至没有滑动，而其他项从左到右滑动）。除此之外有点难以解释，但是如果您尝试plunker 中的示例，您会看到效果。 正如我所说，到目前为止，这个问题只发生在 Firefox 中，并且在 Chrome 和 IE11 中似乎还可以。 这里又是我的plunker 我的 AngularJS 控制器代码

<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 动画的从左到右的代码

/* 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”完全在右侧（并且固定在那里并且没有移动），根本不是滑动动画效果的一部分

【问题讨论】：

它在 FF 上很适合我。

你不是有右边最后一个总是出现在所有其他人之前并且不动的吗？我应该在我的另一台电脑上试一试，以确保

我可以看到问题，但奇怪的是，一旦我使用 Firebug 检查列表元素，它就会消失。关闭 Firebug 后，问题再次弹出。

即使打开 Firebug，我也发现行为不一致。对于前 2 或 3 次点击“下一步”，它不会发生，然后随机发生一次。

我开始相信这与 ng-repeat 的运行方式有关。我将样式更改为不使用变换，以防万一这是一个错误，并且正在发生同样的影响。 plnkr.co/edit/qVvzvxRcf06vnclXMICu?p=preview

【参考方案1】：

我将脚本更新为最新版本的库，并且运行良好。

jquery: 2.1.1 angular: 1.3.0 angular-animate: 1.3.0

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1-rc2/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular-animate.js"></script>

我添加了这些更改，这就是结果。你可以在这个 plunker 链接中看到它。

http://embed.plnkr.co/Ry7WTBPZKxeHhL1V5jKy/preview

【讨论】：

哇，好吧，我知道你真的想要 +50，而且我知道我说我更喜欢跟上时代，但我也提到了1.2.2x，另一方面，现在你真的给了我一个工作解决方案（有点）虽然它仍然是一个未发布版本1.3 RC3 现在......所以这是交易，我不能给你 50 分，因为它不是正式版本（这是我想要的，也是因为1.3 破坏了我的一些代码，虽然我没有在我的问题中指定），所以我仍然更喜欢1.2.2x 的工作解决方案我会等待，但如果真的是唯一的选择，我可能会接受它

我帮助的原因不是为了得分，而是帮助您提供解决问题的方法。因为这就是想法，帮助每个开发人员。我不是 javascript 架构师，但每天我都通过帮助他人来学习更多。但是谢谢你的分数。上帝保佑你

再次感谢您的帮助，我不想冒犯您，非常感谢您花时间帮助解决我的问题。我也和你一样认为回答问题，有时提出问题确实对彼此有很大帮助，所以我非常同意你的观点......话虽如此，我真的希望找到一个当前版本的解决方案，提供更高的score 有助于提高知名度，我真的希望能与这些 1.2.x 版本一起工作。非常感谢您的帮助和 cmets

由于我没有得到更好的答案（使用Angular 1.2.x），我会接受您的答案作为将来实施1.3.x 时的有效选择。感谢您的帮助！

【参考方案2】：

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

【参考方案3】：

我分叉了您的源代码，以便向您提出如何做到这一点的建议。 您的问题可能出在您正在使用的库的版本中。

解决方案： 1.更改库版本。 2. 添加jquery库以实现角度最佳性能 3.css属性动画添加-moz-前缀

-moz-transform `

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular-animate.js"></script>
<script type="text/javascript" src="script.js"></script>

我添加了这些更改，这就是结果。你可以在这个 plunker 链接中看到它。我希望这会有所帮助。

http://embed.plnkr.co/Ry7WTBPZKxeHhL1V5jKy/

【讨论】：

您的问题可能出在您正在使用的库的版本中

我不想使用这么旧版本的 Angular，你基本上是在指向 1.2.0 RC3 这太旧了，甚至不是发布版本......我宁愿有一些工作使用最新版本的1.2.2x 和 jQuery，是的，我确实在我的真实应用程序中使用了 jQuery（最新），最后添加 -moz-transform 并没有做出任何改变，因为我相信 Mozilla 从他们的CSS 很久以前就需要了。话虽如此，如果 AngularJS 或 Animate 代码有问题，那么 Angular 核心开发人员需要意识到这一点。感谢您的帮助

早上好，上帝保佑你。我知道您使用的版本比我使用的版本新；这就是问题所在，您的 mozilla 版本可能与您使用的库版本不同。请记住，并非所有库版本在所有浏览器版本中都能正常工作。这就是我包含这些版本的原因。我用我的 mozilla 版本测试了你正在使用的库版本，但它不起作用。

再次感谢您的帮助，但考虑到理论上我们应该始终与我们的工具和应用程序版本保持同步，我仍然希望它能够与最新的 AngularJS 和 Animate 版本一起使用。问题出在 Angular 和/或 Animate 库上，那么我将不得不向负责的小组提出建议。感谢您的帮助，但很遗憾无法接受旧版本的答案...希望您理解...再次感谢您的帮助！