Angularjs 旋转木马中具有角度的淡入内容

我是angular的新手，正在尝试解决这个问题，尽管我现在被困在基于内容的旋转木马中为内容制作动画。我自己制作了这个旋转木马，但我没有考虑“幻灯片”之间的渐变内容会如何在这个过程中发挥作用。p> 目前，我的旋转木马的结构是：

<article class="container-fluid carousel-container" ng-controller="carouselController">
    <div class="container">
        <div class="prev-container">
            <button class="prev" ng-click="prevSlide()"><span>&lsaquo;</span></button>
        </div>
        <div class="slide">
            <div class="slide-left">
                <h1 class="slide-inner" ng-cloak>{{panels[slide].title}}</h1>
                <p class="slide-inner" ng-cloak>{{panels[slide].body}}</p>
            </div>
        </div>
        <div class="next-container">
            <button class="next" ng-click="nextSlide()"><span>&rsaquo;</span></button>
        </div>
    </div>
</article>

---

这里的基本思想是从

面板

数组填充内容，单击next按钮或prev按钮将分别增加或减少数组索引。然后，这将填充

幻灯片左

div中的标题和正文内容。我遇到的问题是，当使用“下一步”或“上一步”按钮时，我希望淡出其中的内容，并淡入新内容。我尝试了

addClass

和

removeClass

，以及许多其他方法，但都没有结果。最大的障碍是，我实际上并没有改变幻灯片，只是改变了内容，因为大多数资源和教程都假设我隐藏了一张幻灯片，并展示了下一张。我期待着您的建议，感谢您的帮助，并随时批评我现有的代码。

如果您想构建一个带有淡入/淡出转换的旋转木马并避免使用，下面是一种涉及创建一组自定义指令的方法

工作示例：

模板 下面是使用此方法时HTML的外观：

<div ng-controller="MyController as vm">
  <carousel panels="vm.panels">
    <carousel-panel>
      <h1>{{$title}}</h1>
      <p>{{$body}}</p>
    </carousel-panel>
    <button carousel-prev>
      &lsaquo; Prev
    </button>
    <button carousel-next>
      Next &rsaquo;
    </button>
  </carousel>
</div>

转盘面板 此指令监视其父级旋转木马控制器的

slide

属性，并在该值更改时向其自身添加

.fade

类。然后设置一个超时（本例中硬编码为500ms），并在延迟过去后删除

.fade

类。这是设计用于纯CSS转换的，如下所述

angular.module('myApp.carousel')
  .directive('carouselPanel', carouselPanelDirective)
;

function carouselPanelDirective($timeout) {
  return {
    link: postLink,
    require: '^carousel',
    template: '<ng-transclude></ng-transclude>',
    transclude: true
  };

  function postLink(scope, iElement, iAttrs, carousel) {
    scope.$watch(currentSlide, transition);

    function currentSlide() {
      return carousel.slide;
    }

    function fadeOut() {
      iElement.addClass('fade');
    }

    function fadeIn() {
      iElement.removeClass('fade');      
    }

    function refresh() {
      var current = carousel.current();
      scope.$title = current.title;
      scope.$body = current.body;
    }

    function transition(currentSlide, previousSlide) {
      if (currentSlide === previousSlide) {
        refresh();
      } else {
        fadeOut();
        $timeout(function() {
          refresh();
          fadeIn();
        }, 500);
      }
    }
  }
}

CSS 这些CSS规则针对

carousel面板的转置HTML内容

，并使用

opacity

应用CSS转换。请注意0.5秒（或500毫秒）的过渡时间，这与我们面板的

$timeout

功能中的延迟相对应

carousel-panel > ng-transclude > * {
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

carousel-panel.fade > ng-transclude > * {
  opacity: 0;
}

结论

---

这看起来可能需要做很多工作，但它比仅仅将逻辑构建到单个控制器中要可重用、可扩展和可维护得多。通过使用，您可以使应用程序模板指定布局（与指令模板一致）。

请考虑使用ng repeat渲染所有幻灯片的面板，使用ng show显示活动幻灯片。那么你的动画应该是可能的。@ShaunScovil这样不可能吗？我已经考虑过了，但是我更愿意解决问题而不是解决它。我不会把它称为解决问题的方法。问题是，您是否希望看到某种交叉淡入淡出的动画，或者您只是想将幻灯片移出，然后更改其内容并将其移回？此幻灯片示例可能比我更好地回答您的问题：我只想淡出内容并淡入新内容。理想情况下，我将能够制作任何css3动画、过渡等。我希望使用

ng animate

，但问题是它取决于我所看到的临时类，并且由于它没有使用

ng repeat

，所以它没有临时类，是否有办法创建它们以及周围的行为？谢谢您的回复。这是我认为我需要花时间去理解的事情，我会在完成后接受或评论。谢谢没问题。关键是我添加了.fade类，然后设置一个超时来删除它。虽然刷新函数也起着关键作用，但基本上可以使用现有代码来实现这一点。您需要添加.fade类；等待过渡完成；然后更改模板中显示的标题和正文值，并删除.fade类。@NathanLykke下面是一个使用现有代码的示例：--这使用

$element

在控制器中执行DOM操作，这违反了最佳实践，但希望它能帮助您在现有代码和我建议的更改之间找到相似之处。谢谢您，js fiddle中的功能正是我想要做的，尽管我绝对希望学习最佳实践，因此我将根据您的建议进行工作，我会让您知道它是否可行，或者我是否有问题。非常感谢你在这方面的帮助。这绝对有效，但是我意识到我理解了其中的10%，我需要做大量的研究才能完全理解它。非常感谢。

angular.module('myApp.carousel')
  .directive('carouselPanel', carouselPanelDirective)
;

function carouselPanelDirective($timeout) {
  return {
    link: postLink,
    require: '^carousel',
    template: '<ng-transclude></ng-transclude>',
    transclude: true
  };

  function postLink(scope, iElement, iAttrs, carousel) {
    scope.$watch(currentSlide, transition);

    function currentSlide() {
      return carousel.slide;
    }

    function fadeOut() {
      iElement.addClass('fade');
    }

    function fadeIn() {
      iElement.removeClass('fade');      
    }

    function refresh() {
      var current = carousel.current();
      scope.$title = current.title;
      scope.$body = current.body;
    }

    function transition(currentSlide, previousSlide) {
      if (currentSlide === previousSlide) {
        refresh();
      } else {
        fadeOut();
        $timeout(function() {
          refresh();
          fadeIn();
        }, 500);
      }
    }
  }
}

angular.module('myApp.carousel')
  .directive('carouselNext', carouselNextDirective)
  .directive('carouselPrev', carouselPrevDirective)
;

function carouselNextDirective() {
  return {
    link: postLink,
    require: '^carousel'
  };

  function postLink(scope, iElement, iAttrs, carousel) {
    iElement.on('click', onClick);
    scope.$on('$destroy', offClick);

    function onClick() {
      carousel.next();
      scope.$apply();
    }

    function offClick() {
      iElement.off('click', onClick);
    }
  }
}

function carouselPrevDirective() {
  return {
    link: postLink,
    require: '^carousel'
  };

  function postLink(scope, iElement, iAttrs, carousel) {
    iElement.on('click', onClick);
    scope.$on('$destroy', offClick);

    function onClick() {
      carousel.prev();
      scope.$apply();
    }

    function offClick() {
      iElement.off('click', onClick);
    }
  }
}

carousel-panel > ng-transclude > * {
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

carousel-panel.fade > ng-transclude > * {
  opacity: 0;
}