Angular 2 - 过滤时卡片转换动画

时间:2017-06-30 14:21:22

标签: angular animation

你知道如何在角度2过滤卡片时动态翻译卡片吗?像这个引导主题的动画:

http://kingstudio.ro/demos/eyecatcher/index3.html

(单击按钮时页面底部的投资组合动画)

非常感谢你的帮助!

1 个答案:

答案 0 :(得分:0)

我这样做的唯一方法是使用CSS中的属性transform: translate

让我们检查您链接到帖子的网站:它是类.shuffle-item.filtered的元素,它使用此属性从一个位置移动到另一个位置。您必须计算每个元素的新位置x,y。例如,在您提供的网站上,每行有4个元素。如果您想要13个元素的坐标,x = 13 % 4 = 1y = 13 / 4 = 3。您只需要将这些数字乘以元素宽度和元素高度