Question

我是AngularJS的新手，我想制作简单的动画，例如用户点击时的PrestaShop节目＆＃34;添加到购物车＆＃34;产品上的按钮。

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

假设我有一个产品的网格列表，其中每个产品都带有照片，按钮带有文字＆＃34;添加到购物车＆＃34;。当用户点击它时，照片应为＆＃34;克隆＆＃34;，不透明度应为0.5，此照片应将位置滑动到位于网站顶部的购物车。

我有一个概念：

ng-repeat中的照片可以渲染两次，其中一个像隐藏在第二个＆＃34;和提到的＆＃34;克隆＆＃34;使用animate应该会影响它们，但是如何以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设置为＆＃39; opaque＆＃39;，只有在isOpaque === true时才会激活。＆＃39;添加到购物车＆＃39;按钮将在单击时将isOpaque设置为true。

其余的只是像往常一样准备你的控制器。

希望这有帮助。