title: AngularJS Animate Firefox doesn't work
body: <p>I have a scrolling line of images that move right or left, new images sliding in when a button is clicked. It is done using ngSwitch and ngAnimate. This works fine for Safari, Chrome, and mobile browsers. But Firefox seems to ignore the animation, just falling back to replacing the elements.</p>
  
  <p>I have heard other cases where Firefox requires some attribute be set on the animated element or the animation is ignored. In that case it was line-height but that's not applicable here. Does Firefox have some special requirements for <code>-moz-transition</code> that webkit does not? Some requirement for the container or the object with the transition. I've used transitions elsewhere and they just worked.</p>
  
  <p>I use ngAnimate to do the animation with these 'less' definitions:</p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p>Here is one of the switch elements and a drib of the next (minor ruby mixed in). Probably too much CSS to show the lot</p>
  
  <pre><code>&lt;div class="row-container  " ng-switch on="page['&lt;%= collection_name%&gt;']"&gt;
    &lt;div class="wizard-animate" ng-switch-when="0"&gt;
      &lt;div class="video_thumb" ng-repeat="video in &lt;%= collection_name%&gt;.slice(0,&lt;%= per_page %&gt;)"&gt;
        &lt;p&gt;
          &lt;a ng-href="/guides/{{video._id}}" target="_self"&gt;
            &lt;img ng-src="{{video.poster_large_thumb}}"&gt;
          &lt;/a&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="wizard-animate" ng-switch-when="1"&gt;
  </code></pre>