文章/答案/技术大牛

发布

社区首页 >问答首页 >angular ngClass动画挂钩

问angular ngClass动画挂钩
EN

Stack Overflow用户

提问于 2015-01-06 23:18:08

回答 1查看 834关注 0票数 0

我需要在类添加/删除时播放动画。到目前为止，我的解决方案看起来很丑陋，使用了两个类的冗长方法。我很高兴能想出更优雅、更整洁的代码。

示例：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%;
  }
}

animation

angularjs

回答 1

Stack Overflow用户

发布于 2015-01-06 23:18:08

正确的解决方案是ngClass指令的动画挂钩不明显：https://code.angularjs.org/1.2.28/docs/guide/animations (类和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%;
  }

}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27801617

复制

相似问题

问angular ngClass动画挂钩
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问angular ngClass动画挂钩EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问angular ngClass动画挂钩
EN