如何在javascript中添加转换效果？

我想在代码中添加转换效果。当出现

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>

用户类型：
错误

---

拉小提琴好的，我发现了我的错误。大多数过渡效果可以通过

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;
}

---

对于要在两个值之间转换的属性，必须更改该属性的值。您似乎没有这样做。您希望何时进行转换？我似乎不明白这一点。我想在出现

class=“error”

时添加转换。有可能吗？转换在

显示

属性上不起作用。如果需要转换，则需要以另一种方式显示/隐藏元素<代码>可见性或

不透明度

应该可以工作。@Quentin与此类似