使用ng-class在角度js中调用动态类（关于条件）

时间：2017-04-10 06:49:56

标签： html css angularjs

我试图根据变量＆quot; statetostartwaves＆＃39;来调用不同的类（来自我的css）。如果这个变量是＆＃39; 0＆＃39; 0然后应该调用class 1（preloader_pause wave），否则如果它是＆＃39; 1＆＃39;然后应该叫第2级（预加载波）

HTML 

<div  ng-class="statetostartwaves ===0 ? 'preloader_pause waves':(statetostartwaves ===1 ? 'preloader waves')" >
        <span></span>
        <span></span>
        <span></span>
 </div>

我的anugular app controller 

selektApp.controller('homeController',['$scope','$timeout',function($scope,$timeout) {

    $scope.statetostartwaves=0;
    $timeout(function(){

        $scope.statetostartwaves=1;


    ,}500);


}]);

以下是我的动画css 

.waves {
    opacity:0;
  -webkit-animation: second 3s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
  animation: second 2s forwards;
  animation-iteration-count: 1;
  animation-delay: 1.2s;
  position: relative;
}
@-webkit-keyframes second {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
    top: -19px; 
  }
}
@keyframes second {
  30% {
    opacity: 0;
    top:-50px;
  }
  100% {
    opacity: 1;
    top: -200px; 
  }
}
.preloader {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
  width: 15px;
  height: 15px;


  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader .6s infinite ease-in-out;
          animation: preloader .6s infinite ease-in-out;
}
.preloader span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
.preloader span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
}

@keyframes preloader {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 90px;
    -webkit-transform: translateY(45px);
            transform: translateY(45px);
    background: #3498db;
  }
  50%,100% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}



.preloader_pause {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader_pause span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
 width: 15px;
  height: 15px;

  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader 0s infinite ease-in-out;
          animation: preloader 0s infinite ease-in-out;
}
.preloader_pause span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.preloader_pause span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.preloader_pause span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}
.preloader_pause span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}
.preloader_pause span:nth-child(6) {
  left: 55px;
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}

@keyframes preloader_pause {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}

2 个答案:

答案 0 :(得分：3)

你可以尝试

ng-class="[{0: 'preloader_pause waves', 1 : 'preloader waves'}[statetostartwaves]]"

$ timeout函数

中也存在语法错误 
$timeout(function(){ $scope.statetostartwaves=1;}, 500);

答案 1 :(得分：1)

当您使用三元操作使用else if条件时，else条件是必须的。像这样修改条件

 ng-class="statetostartwaves ===0 ? 'preloader_pause waves':(statetostartwaves ===1 ? 'preloader waves' : 'no class')"

也在$timeout中，逗号后面是大括号。将,}500);更改为},500);

＆＃13;
＆＃13; 
angular.module("app",[])
.controller("ctrl",function($scope,$timeout){
$scope.statetostartwaves = 0;
console.log('state>', $scope.statetostartwaves);
$timeout(function() {
	$scope.statetostartwaves = 1;
	console.log('state1>', $scope.statetostartwaves);
}, 500);

})
＆＃13; 
.waves {
    opacity:0;
  -webkit-animation: second 3s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
  animation: second 2s forwards;
  animation-iteration-count: 1;
  animation-delay: 1.2s;
  position: relative;
}
@-webkit-keyframes second {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
    top: -19px; 
  }
}
@keyframes second {
  30% {
    opacity: 0;
    top:-50px;
  }
  100% {
    opacity: 1;
    top: -200px; 
  }
}
.preloader {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
  width: 15px;
  height: 15px;


  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader .6s infinite ease-in-out;
          animation: preloader .6s infinite ease-in-out;
}
.preloader span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
.preloader span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
}

@keyframes preloader {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 90px;
    -webkit-transform: translateY(45px);
            transform: translateY(45px);
    background: #3498db;
  }
  50%,100% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}



.preloader_pause {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader_pause span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
 width: 15px;
  height: 15px;

  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader 0s infinite ease-in-out;
          animation: preloader 0s infinite ease-in-out;
}
.preloader_pause span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.preloader_pause span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.preloader_pause span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}
.preloader_pause span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}
.preloader_pause span:nth-child(6) {
  left: 55px;
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}

@keyframes preloader_pause {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div  ng-class="statetostartwaves ===0 ? 'preloader_pause waves':(statetostartwaves ===1 ? 'preloader waves' : 'no class')" >
        <span></span>
        <span></span>
        <span></span>
 </div>
 {{statetostartwaves}}
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题