ngSrc 指令中带有 ngAnimate 的滑块动画答案

【问题标题】：Slider animation with ngAnimate in a ngSrc directivengSrc 指令中带有 ngAnimate 的滑块动画
【发布时间】：2014-09-19 01:57:59
【问题描述】：

我有一些这样的代码https://stackoverflow.com/a/18235271/3018275

所以我想做这样的动画http://www.nganimate.org/angularjs/ng-switch/slider-css3-transition-animation

但是我已经看到 ng-animate 不适用于 ng-src，所以我想使用 ng-show 和 watch 事件来设置布尔变量，但我不能这样做。

谁能给我一些建议？

【问题讨论】：

标签： javascript angularjs animation ng-animate

【解决方案1】：

最佳做法是为滑块创建一个指令，但您也可以这样做。它缺少一些代码，但这是您应该采用的方法。

在您的 html 中：

<div id="image-slider" ng-style="sliderStyle">
    <div class="image" ng-repeat="(key, source) in imagesServingUrl track by $index" ng-style="imgStyle">
        <img class="productImage" ng-src="{{source.serving_url}}" ng-class="{'hideImg':(current!=key), 'showImg':(current==key)}" />
        <span class="arrow-right" ng-click="next(current+1)"/>
        <span class="arrow-left" ng-click="prev(current-1)"/>
    </div>
</div>

` 在你的 CSS 中：

img.showImg {
  opacity: 1;
  -webkit-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
  -moz-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
  -ms-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
  -o-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
  transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
}

img.hideImg {
  opacity: 0;
  -webkit-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
  -moz-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
  -ms-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
  -o-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
  transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
}

在你的控制器中

$scope.next = function(next) {
  $scope.current = next;
  $scope.percent -= 100;
  return $scope.imgStyle = {
    transform: 'translateX(' + $scope.percent + '%)',
    width: $scope.sliderWidth,
    height: $scope.sliderHeight
  };
};

【讨论】：