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

【问题标题】：How to add transition effect in javascript?如何在javascript中添加过渡效果？
【发布时间】：2015-02-26 08:58:04
【问题描述】：

我想在我的代码中添加过渡效果。当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/

【问题讨论】：

对于要在两个值之间转换的属性，您必须更改该属性的值。你似乎没有这样做。
您希望何时进行转换？我似乎无法理解。
我想在class="error"出现时添加转场，可以吗？
过渡不适用于display 属性。如果您想要过渡，则需要以另一种方式显示/隐藏元素。 Visibility 或 opacity 应该可以工作。
@Quentin 类似于此jsfiddle.net/8atm9bdb/3

标签： javascript html angularjs css

【解决方案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/

【讨论】：