鍍金池/ 問(wèn)答/HTML5  PHP  數(shù)據(jù)庫(kù)  網(wǎng)絡(luò)安全  HTML/ while 搭配 animation.css ? 怎麼樣才會(huì)有一個(gè)一個(gè)出現(xiàn)的效果

while 搭配 animation.css ? 怎麼樣才會(huì)有一個(gè)一個(gè)出現(xiàn)的效果？

因?yàn)槲沂怯?php 撈數(shù)據(jù)
所以會(huì)是這樣

<? while($row = mysqli_fetch_array($data)){ ?>

裡面有 div 是每個(gè)商品的個(gè)人區(qū)塊

<div class="admin-user-layout pointer animated fadeInUp">
...
</div>

在裡面加上 animation.css 的外掛後
他出現(xiàn)確不會(huì)是一個(gè)一個(gè)出現(xiàn)？有時(shí)候三個(gè)一起，有時(shí)候五個(gè)一起？
怎麼會(huì)這樣呢？

回答
編輯回答
冷咖啡

在遍歷時(shí)，給每個(gè)生成的div元素，動(dòng)態(tài)設(shè)定style ，指定動(dòng)畫延遲時(shí)間，偽代碼（我不會(huì)php的語(yǔ)法）

set $delay = 0;  
set $interval = 0.1;//設(shè)定動(dòng)畫間隔為0.1s
while haveRows
   輸出  <div class="admin-user-layout pointer animated fadeInUp" style="animation-delay:" + $delay + "s;"></div>
   $delay += $interval;
2017年2月12日 18:15
編輯回答
心悲涼

設(shè)置不同的delay 或者定時(shí)器依次給加控制顯示的類

2017年2月24日 00:55