在AngularJS中“交换”div和数据

时间:2013-11-11 12:00:28

标签: javascript angularjs animation user-interface

不确定说出这个的最好方法,但我正在尝试复制类似于Tinder的内容。用户界面的视频演示如下:http://www.youtube.com/watch?v=cdechGTbQfY

这是我到目前为止所获得的一个人:http://plnkr.co/edit/zzb143PeO7QgnyKijFmG?p=preview

它运作得很好(想象.next div位于.current div下面,我只是将它们设置为这样,这样我就可以看到发生了什么。)

然而,它缺少两件事:

  1. 删除'当前'div时,它应该通过ng-animate滑落。目前,数据完全消失,然后重新出现在新的位置
  2. (我想).current div需要首先制作动画,然后.next div需要成为.current div,然后是arr中的下一个项目数组需要加载到.next
  3. 我不是非常精通Angular,所以不确定最好的方法来解决这个问题,也不能在网上找到任何类似的例子。关于如何为Angular实现类似卡片的UI的任何想法?

1 个答案:

答案 0 :(得分:0)

这篇文章可以帮到你 http://onehungrymind.com/build-sweet-photo-slider-angularjs-animate/

这里使用http://www.greensock.com/tweenmax/,但如果你想要

,你可以使用另一件事