如何触发自定义动画，并在数据绑定前后等待它完成

How to trigger a custom animation and wait for it to complete before and after data bind

本文关键字：等待 数据绑定 自定义 何触发 动画      更新时间：2023-09-26

我正在渲染每5项包含包装div的标记

   <div class="snap" ng-repeat="itemsChunk in items">
        <a class="timeline-item" href="#" ng-repeat="item in casestudyChunk">
             <img class="img-responsive" src="{{item.ImageUrl}}" />
        </a>
   </div>

其中item是被分割成块的数组。分割数组

由于在数据源更改后标记需要完全重新呈现，所以我不能使用普通的动画钩子。相反，我想在更改之前淡出所有项，并在

中淡出新呈现的标记。

我如何在Angular中做到这一点?

更新

我得到的一个选项是对元素应用一个fadeOut类，监听完整的事件，然后绑定。但这感觉不像是正确的角度方式。有没有更好的办法?

我也懒惰加载图像，所以需要运行一个函数来触发绑定后。如果有更好的方法我感兴趣的话，我已经见过使用超时完成此操作。

你可以尝试使用animation .css添加到你的

<div class="snap" ng-repeat="itemsChunk in items">

渐显css类

  <div class="snap animated fadeIn" ng-repeat="itemsChunk in items">

在那里你可以找到类似的解决方案

相关文章：