Question

我一直在尝试使用Angular创建一个滑块。我已经在框架中确定了ng-repeat和ng-show。

Chrome显示效果很好，但对于Edge和IE，淡入/淡出失败。

我的CSS是

.slide {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.slid {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 95%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0);
}

.animate {
    opacity: 1;
}

.animate.ng-hide-add, .animate.ng-hide-remove {
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}

.animate.ng-hide {
    opacity: 0;
}

http://plnkr.co/edit/ntX0Rm?p=info

编辑：

在Chrome中也不对;两个错误。一个将节目分开并隐藏过渡以延迟新幻灯片的外观。其次是将类放在ng-repeat'ed元素中，而不是它的孩子。

IE仍然不喜欢。

HTML调整

<div class="slide-hide" ng-show="isActive($index)" ng-repeat="s in slides track by $index"> <x-slide slide-content="s"></x-slide> </div>

不

<div ng-repeat="s in slides track by $index"> <x-slide class="slide-hide" ng-show="isActive($index)" slide-content="s"></x-slide> </div>

CSS调整

.animate.ng-hide-add {
  transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}

.animate.ng-hide-remove {
  transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all 1000ms;
}

编辑：

最后，我发现了很多儿童动画问题。所以我通过使用指令来改变内容并使用ng-hide和控制器驱动隐藏变量来避免整个问题。这解决了这个问题。

html变短了

<x-slide class="" slide-content="slideone" ng-show="slideoneshow" ng-class="slideoneclass"></x-slide>
<x-slide class="" slide-content="slidetwo" ng-show="slidetwoshow" ng-class="slidetwoclass"></x-slide>

和css更简单

.slide > .fade.ng-hide-add,
.slide > .fade.ng-hide-remove {
/* transition should not exceed delay in $timeout in js file */
  transition: all 500ms ease-in;
  opacity: 1;
}

.slide > .fade.ng-hide {
  opacity: 0;
}

并且js不太难

app.controller('slideControl', ['$scope', '$timeout' function($scope, $timeout) {
var viewing = 0;
var slides = []; /* fill this with html snippets */

function showSlide() {
  $scope.slideoneshow = false;
  $scope.slidetwoshow = false;
  if (viewing % 2 == 0) {
    $scope.slideone = slides[viewing];
    $scope.slideoneclass = "slid fade";
    $timeout(function(){ $scope.slideoneshow = true; }, 500);
  }
  else {
    $scope.slidetwo = slides[viewing];
    $scope.slidetwoclass = "slid fade";
    $timeout(function(){ $scope.slidetwoshow = true; }, 500);
  }
}

加上一条指令来观看幻灯片和$编译html

CSS淡出淡出 - Chrome OK，Edge和IE失败

0 个答案: