如何在javascript中添加过渡效果

How to add transition effect in javascript?

本文关键字：添加 过渡效果 javascript      更新时间：2024-06-08

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

好的，我发现了我的错误。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/

相关文章：