AngularJS克隆元素和动画位置

Question

我是 AngularJS 的新手，当用户点击产品上的“添加到购物车”按钮时，我想制作像 PrestaShop 那样的简单动画。

我找到了一篇关于 AngularJS 动画的好文章，但是有一些方法可以做到这一点......

假设我有一个产品网格列表，其中每个产品都有照片，并且按钮带有文本“添加到购物车”。当用户点击它时，照片应该被“克隆”，不透明度应该是 0.5，这张照片应该滑动到网站顶部的购物车。

我有一个概念：

ng-repeat 中的照片可以渲染两次，其中一张就像隐藏在“第二张之后”，并且提到的带有动画的“克隆”应该会影响它们，但是如何以 AngularJS 的方式制作呢？ （如果这是个好主意）

Answer 1

如果你不需要支持旧的浏览器，而不是渲染两次照片，试试这样的；

设置一个CSS来改变不透明度，比如：

.opaque {
    opacity: 0.5;
    /* and maybe other browser specific opacity settings */
}

在您的 HTML 中：

<img src="...." ng-class="{opaque:isOpaque}" />
<button type="button" ng-click="isOpaque=true">Add to cart</button>

如您所见，<img> 上的 ng-class 设置为“不透明”，只有在 isOpaque === true 时才会激活。然后，“添加到购物车”按钮将在单击时将 isOpaque 设置为 true。

剩下的只是像往常一样准备你的控制器。

希望这会有所帮助。