css - Angularjs CSS动画不适用于ng-show

Question

我正在使用 ng-repeat 将包含图像、一些文本和索引(0 到 3)的 JSON 对象数组加载到 slider 中。我有一些功能可以根据单击的与每个 JSON 对象相对应的导航按钮来更改显示的图像和文本。我已经能够在 slider 中显示正确的图像和文本，但是，CSS 动画无法正常工作。有谁知道我的代码有什么问题？谢谢。

          <div class="slide-window"  >

                 <div ng-repeat="x in content" class="slide" ng-show="showSlide == {{x.index}}" >


                            <img src="{{x.image}}" />
                            <div class="slide-copy">{{x.copy}}</div>  


                </div>



.slide.ng-enter, .slide.ng-leave {

 -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 

}

.slide.ng-enter {

position:absolute;
 left:100%;

}

.slide.ng-enter.ng-enter-active {
left:0; 

}

.slide.ng-leave {

  position:absolute;
  left:0;
}

.slide.ng-leave-active {

      left:-100%;
} 

Answer 1

首先，您的 ng-show 表达式 showSlide == {{x.index}} 语法错误。你想要的是 showSlide === x.index

然后，ng-enter 和 ng-leave 类用于动画添加/从 DOM 中删除的元素，因为您更新了 ng-repeat，或者因为它们已被 ng-if 修改。

ngShow 指令不会从 DOM 中删除任何内容，而只是添加一个隐藏元素的特定类(使用 display: none 样式)。

为此类指令设置动画的正确方法是使用 .ng-show 和 .ng-hide 类，您可以在文档中阅读:https://docs.angularjs.org/api/ng/directive/ngShow