没有 jquery/js 的动画 ng-click

Posted 2023-05-08

【中文标题】没有 jquery/js 的动画 ng-click

【英文标题】：Animate ng-click without jquery/js

【发布时间】：2016-10-07 01:30:43

【问题描述】：

您好，我有一条丝带，里面有一些 div。如果它重叠并且您无法看到所有内容，我会在功能区左侧显示一个箭头，在功能区右侧显示一个箭头。使用这个箭头，我可以在圆圈中无限滚动浏览功能区（向左或向右）。

我的代码如下所示：

<div class="arrow" ng-click="list.push(list.shift())>&larr;</div>
<div class="ribbon">
    <div class="ribbonItem" ng-repeat="item in list">
         item.Name 
    </div>
</div>
<div class="arrow" ng-click="list.unshift(list.pop())>&rarr;</div>

这可行，但它没有动画并且增加了。它还需要多次点击才能滚动。如何在不使用 jquery 或 js 的情况下实现动画，而只需使用此 ng-click 即可。我尝试在我的 ng-repeat 的 css-classes ng-enter/ng-leave 上进行转换，但它不起作用：https://docs.angularjs.org/api/ng/directive/ngRepeat（查看“动画”）。

有人有想法吗？

谢谢。

【参考方案1】：

类似问题：how to use animation with ng-repeat in angularjs

浏览此链接可能会对您有所帮助： http://www.nganimate.org/angularjs/ng-repeat/move