Question

我有一个向右或向左移动的滚动图像，当点击按钮时，新图像会滑入。它使用ngSwitch和ngAnimate完成。这适用于Safari，Chrome和移动浏览器。但Firefox似乎忽略了动画，只是回到了替换元素。

我听说过其他情况，Firefox需要在动画元素上设置一些属性，否则动画会被忽略。在这种情况下，它是行高，但这不适用于此。 Firefox对-moz-transition有什么特殊要求吗？对容器或具有转换的对象的一些要求。我在其他地方使用过渡，他们只是工作。

我使用ngAnimate来做这些“较少”定义的动画：

.wizard-animate.ng-enter,
.wizard-animate.ng-leave{

  -webkit-transition: 1s ease all;
  -moz-transition: 1s ease all;
  -ms-transition: 1s ease all;
  -o-transition: 1s ease all;
  transition: 1s ease all;
}

.animate-left .wizard-animate.ng-enter {
  left: 100%;
}

.animate-right .wizard-animate.ng-enter {
  left: -100%;
}

.wizard-animate.ng-enter.ng-enter-active{
  left: 0;
}

.wizard-animate.ng-leave{
  left: 0;
}

.animate-left .wizard-animate.ng-leave.ng-leave-active{
  left: -100%;
}

.animate-right .wizard-animate.ng-leave.ng-leave-active{
  left: 100%;
}

这是一个开关元件和下一个（混合的小红宝石）。显示批次可能太多的CSS

<div class="row-container  " ng-switch on="page['<%= collection_name%>']">
  <div class="wizard-animate" ng-switch-when="0">
    <div class="video_thumb" ng-repeat="video in <%= collection_name%>.slice(0,<%= per_page %>)">
      <p>
        <a ng-href="/guides/{{video._id}}" target="_self">
          <img ng-src="{{video.poster_large_thumb}}">
        </a>
      </p>
    </div>
  </div>
  <div class="wizard-animate" ng-switch-when="1">

AngularJS Animate Firefox不起作用

0 个答案: