Question

我正在尝试构建动画滑块，我发现了类似的问题here

但是这个答案在IE 8中不起作用。

    function slideShowController($scope, $timeout) {
 var slidesInSlideshow = 4;
 var slidesTimeIntervalInMs = 3000; 

  $scope.slideshow = 1;
  var slideTimer =
    $timeout(function interval() {
      $scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
      slideTimer = $timeout(interval, slidesTimeIntervalInMs);
    }, slidesTimeIntervalInMs);
}

    <!DOCTYPE html>
<htm ng-app>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>
  </head>

    <body>
        <div id="header">
            <div id="withinheader">
            this is header
            </div>
        </div>
        <div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
            <div class="slider-content" ng-switch-when="1">
                <p>Slider's are amazing1!</p>
            </div>  
            <div class="slider-content" ng-switch-when="2">
                <p>Slider's are amazing2!</p>
            </div>
            <div class="slider-content" ng-switch-when="3">
                <p>Slider's are amazing3!</p>
            </div>  
            <div class="slider-content" ng-switch-when="4">
                <p>Slider's are amazing4!</p>
            </div>  
        </div>
        <div id="mainbody">
        this is body
        </div>
    </body>

</html>


body{
    background-image:url('../asset/background.png');
    background-repeat: repeat;  
    margin: 0%; 
    font-family: 'Advent Pro', sans-serif;
}

.slideshow {
  font-family: "Arial", sans-serif;
  text-align: center;
  position:relative;
  width:600px;
  overflow:hidden;
  background: #1a1a1a;
  margin: 0 auto;
  color: white;
  text-shadow: 1px 1px 1px #000;
  border-radius: .3em;
  margin-top: 30px;
}

#header {
    background-color: #FFFFFF;
    width:100%;
    height:100px;
    border-bottom: 4px solid #EE514B;
}

#withinheader {
    width:60%;
    margin: 0 auto;
    height: 100px;
}

.imageslide{
    width:600px;
    height:400px;
    margin: 0 auto;
    margin-bottom: 20px;
    overflow:hidden;
    position:relative;
    text-align: center;
}

.imageslide .slider-content {
  position: absolute;
  width:100%;
  height:400px;

}

.animate-enter,.animate-leave {
    -webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
    -moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
    -ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
    -o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
    transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}

.animate-enter {
    left:100%;
}

.animate-enter.animate-enter-active {
    left:0;
}

.animate-leave {
    left:0;
}

.animate-leave.animate-leave-active {
    margin-left:-100%;
}



#mainbody {
    background-color: #FFFFFF;
    width:50%;
    min-height:1024px;
    height: auto;
    border-radius: 5px;
    border: 1px solid #EEEEEE;
    margin: 0 auto;
}

我的应用程序使用的是角度js版本1.2.14。如何使用角度js版本1.2.14（或1.2 +）

进行相同的动画

提前致谢

Angular JS动画滑块

0 个答案: