Question

今天我正在使用ngAnimate（AngularJS）处理动画。

我有一个div，当我点击一个按钮时我希望它向右移动。使用jQuery，您可以轻松完成：

.animate({marginLeft: "+=300"}, 500);

但我不知道如何用ngAnimate做到这一点。有什么想法吗？

Answer 1

为什么不使用transform？使用transform: translate3d(300)的类并在动画制作时应用该类

<div class="animate-slide" ng-show="slide" ng-click="slide=!slide">
  <center>AngularJS ng-animate<center>
</div>

此方法还有一个额外的好处，即动画在GPU上发生，并且帧速率不受影响

修改

请参阅此codepen以获取具体实现：http://codepen.io/agramian/pen/JCloz

Answer 2

Here是ng-style的示例：

<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>

您可以在控制器中创建变量，增加点击边距的值并更新样式。

ngAnimate：我该怎么做＆＃34; + 300px＆＃34;点击？

2 个答案: