如何在javascript中添加过渡效果？

Question

我想为我的代码添加过渡效果。当出现error css时，应该添加转换，但我无法应用它。我知道如何在悬停时添加转换，但我不知道如何处理这种情况？

这是我的css

.error{
    width:300px;
    height:100px;
    background: red;
    -webkit-transition:all linear 0.5s;
   transition:all linear 0.5s;
}

HTML

<div ng-app='app' ng-controller='appCtrl'>
    <form name="myForm" >
  userType: <input name="input" ng-model="userType" required>
  <div class="error" ng-show="myForm.input.$error.required">
      <p>err</p>
  </div>

 </form>
</div>

小提琴 http://jsfiddle.net/8atm9bdb/1/

Answer 1

好的，我发现了自己的错误。大多数过渡效果可以通过ngAnimate

来实现

.error.ng-hide-add.ng-hide-add-active,
.error.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}

http://www.nganimate.org/