Question

我正在尝试对library(doSNOW) library(itertools) # if size on cores exceeds available memory, increase the chunk factor chunk.factor <- 1 chunk.num <- kNoCores * cut.factor tic() # init the cluster cl <- makePSOCKcluster(kNoCores) registerDoSNOW(cl) # init the progress bar pb <- txtProgressBar(max = 100, style = 3) progress <- function(n) setTxtProgressBar(pb, n) opts <- list(progress = progress) # conduct the parallelisation travel.queries <- foreach(m=isplitRows(coord.table, chunks=chunk.num), .combine='cbind', .packages=c('httr','data.table'), .export=c("QueryOSRM_dopar", "GetSingleTravelInfo"), .options.snow = opts) %dopar% { QueryOSRM_dopar(m,osrm.url,int.results.file) } # close progress bar close(pb) # stop cluster stopCluster(cl) toc()中的每个项目进行延迟转换。

每个项目必须在上一个项目后几毫秒设置动画。

这是我的组件代码：

ngFor

及其html标记：

@Component({
    selector: 'bookmark-list',
    templateUrl: './bookmark.list.component.html',
    providers: [BookmarkService],
    styleUrls: ['./bookmark.list.component.less'],
    animations: [
        trigger('myAwesomeAnimation', [
            transition(':enter', [
                style({transform: 'scale(0.8)',}),
                animate('1.5s ease-out', style({transform: 'scale(1)',})),
            ]),
        ])
    ]
})

有一种方法可以将延迟作为角度转换的参数传递吗？

修改

根据Oluwafemi Sule的回答，错开是解决方案：

<div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let bookmark of bookmarks | bookmarkPipe:search">
  <div [@myAwesomeAnimation]='"large"'>
    <bookmark-item [bookmark]="bookmark"></bookmark-item>
  </div>
</div>

必须改进转型，但它可以完成工作。

和HTML标记：

    transition('* => *', [
        query(':leave', [
          stagger(
            100, [
              animate('0s ease-in-out', style({
                transform: 'scale(0.8)'
              }))
            ]
          )
        ], {optional: true}),
        query(':enter', [
          style({
            transform: 'scale(0.8)',
          }),
          stagger(100, [
            animate('0.5s 0.7s ease-in-out', style({
              transform: 'scale(1)',
            }))
          ])
        ], {optional: true})
      ])

Answer 1

~~您可以在持续时间后传递延迟。~~

~~animate('1.5s delay ease-out', style({transform: 'scale(1)',})),~~

~~您需要为列表中的每个项目计算延迟，以实现平滑过渡。~~

为了实现每个项目的延迟，您需要升级到版本4.2.0-4.3.2 中的 Angular版本才能使用 experimental {{ 1}}动画功能。

stagger

参考：

https://angular.io/guide/animations#delay

https://angular.io/api/animations/stagger

https://github.com/matsko/ng4-animations-preview

Answer 2

将动画放在外部javascript文件中并导出动画功能，如下所示：

     ...
     animate(PARAM_DELAY +' ease-out', style({transform:'scale(1)',}))
     ...

其中PARAM是一个全局变量（抱歉没有找到更好的方法），你可以在同一个js文件中导入它。

在组件类中，导入js文件并将动画设置为awesomeAnimation（）。在你的班级中你应该知道书签数组长度的长度，所以从这里设置PARAM_DELAY的值到（你想要的动画总时间/数组长度的毫秒时间）并将其转换为字符串+＆＃ 39; MS＆＃39; （比如＆＃39; 100ms＆＃39;）; 我想是的。

过渡延迟角4与ngFor

2 个答案:

参考：