Question

我需要在课程添加/删除时播放动画。到目前为止，我使用2个类的详细方法看起来很难看。我很乐意提出更优雅，更干净的代码。

示例：http://plnkr.co/edit/wvrfP3lIbRmBeSdi99xO?p=preview

HTML：

<body ng-app="ngAnimate">
  <input id="setbtn" type="button" value="set" ng-click="myVar=true">
<input id="clearbtn" type="button" value="clear" ng-click="myVar=false">
<br>
<span class="base-class" ng-class="{'my-class1': myVar, 'my-class2': !myVar }">Sample Text</span>
</body>

的CSS：

.base-class {
  cursor: default;
  display: block;
  background: #dc5d63;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  position: relative;
  height: 77px;
  font-family: Cala-Bold, serif;
  float: left;
}
.base-class.my-class1,
.base-class.my-class2 {
  -moz-animation: 1s slidein ease-out;
  -webkit-animation: 1s slidein ease-out;
  animation: 1s slidein ease-out;
}
@-webkit-keyframes slidein {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0%;
  }
}

@-moz-keyframes slidein {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0%;
  }
}

@keyframes slidein {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0%;
  }
}

Answer 1

对于ngClass指令，正确的解决方案并不是明显的动画钩子：https://code.angularjs.org/1.2.28/docs/guide/animations（Class和ngClass动画钩子部分）

工作示例：http://plnkr.co/edit/fMaALtiR8dxR8QkAoH6E?p=preview

html：

<body ng-app="ngAnimate">
  <input id="setbtn" type="button" value="set" ng-click="myVar=true">
<input id="clearbtn" type="button" value="clear" ng-click="myVar=false">
<br>
<span class="base-class" ng-class="{'my-class': myVar }">Sample Text</span>
</body>

的CSS：

.base-class {
  cursor: default;
  display: block;
  background: #dc5d63;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  position: relative;
  height: 77px;
  font-family: Cala-Bold, serif;
  float: left;
}
.base-class.my-class-add,
.base-class.my-class-remove {
  -moz-animation: 1s slidein ease-out;
  -webkit-animation: 1s slidein ease-out;
  animation: 1s slidein ease-out;
}
@-webkit-keyframes slidein {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0%;
  }
}

@-moz-keyframes slidein {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0%;
  }
}

@keyframes slidein {
  from {
    margin-top: -100%;
  }
  to {
    margin-top: 0%;
  }

}

angular ng类动画钩子

1 个答案: