ngAnimate：如何在点击时执行“+300px”？

Question

今天我正在使用 ngAnimate (AngularJS) 制作动画。

我有一个 div，我希望它在我单击按钮时向右移动。使用 jQuery，您可以轻松做到：

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

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

Answer 1

你为什么不用transform？将 class 与 transform: translate3d(300) 一起使用，并在动画

时应用 class

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

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

编辑：

请参阅此代码笔以了解确切的实施方式：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：如何在点击时执行“+300px”？

ngAnimate : How can I do "+300px" on click?

angularjs

css-animations

ng-animate