在React中,如何为div设置动画效果并防止其下方的内容在动画结束时跳转?

时间:2018-11-12 23:34:39

标签: javascript reactjs animation reactcsstransitiongroup

我有一个使用淡入淡出动画的div。完成后,我相信它会设置library(data.table) #Create the fictional data up to the current choice. choices<-c(1:100) #vector of possible choices people<-data.frame(ID=1:10) setDT(people,key="ID") people[,current_choice:=sample(choices,1),by= .(ID)] #what the person uses now people[,chosen := sample(choices,1),by= .(ID)] #what the person actually picked at t_2 #expand the dataset to be 30 rows per person and create a choice ID people<-people[rep(1:.N,30),] setDT(people,key="ID") people[,choice_id:=seq_len(.N), by=.(ID)] #The current choice at t_1 needs to be in the choice set ## the `choice_id == 1L` is critical here, filtering by just `people[1, ...]` wasn't giving ## the result you were actually going for people[choice_id == 1L, choice_set := current_choice, by=.(ID)] #The actual choice needs to be in the choice set people[choice_id == 2L & current_choice != chosen, choice_set := chosen, by= .(ID)] ## Use setdiff to make sure we sample the rest from a vector excluding the ## `current_choice` and `chosen` values people[choice_id > 2L, choice_set := sample(setdiff(choices,c(current_choice,chosen)), .N), by = .(ID)] ,此时它下面的内容会跳起来填充该空间。如何使它更平滑?我以为也许在动画结尾时,我可以插入高度完全相同的display:none div,并为其高度缩小设置动画。但这感觉很普通,我不想在这里重新发明轮子。

1 个答案:

答案 0 :(得分:1)

display: none将从DOM中完全删除该元素,并且自然而然地其余元素将“跳起来”以取代它的位置...如果您不希望这样做,可以简单地将其设置为{{ 1}}或visibility: hidden ...,而不是使用相同的...创建占位符div ...