swiper循環(huán)和動(dòng)畫(huà)沖突
問(wèn)題描述
使用swiper,給滑塊子元素加了一個(gè)bounceRight的動(dòng)畫(huà),loop設(shè)置成false,沒(méi)有問(wèn)題,但是想要的效果是循環(huán)滾動(dòng),loop設(shè)置成true時(shí),像右滑動(dòng)時(shí),每次循環(huán)回來(lái)滾到第一個(gè)滑塊,雖然動(dòng)畫(huà)還在,但是當(dāng)滑動(dòng)時(shí)候,加了動(dòng)畫(huà)的元素就消失了,向左邊滑動(dòng)時(shí)候,每次循環(huán)滾動(dòng)到第三個(gè)滑塊也是一樣,動(dòng)畫(huà)在,開(kāi)始滑動(dòng)時(shí),子元素就消失。
看谷歌控制臺(tái),子元素的css屬性因?yàn)榧恿薬ni類(lèi),每次到首尾相接時(shí)候設(shè)置了動(dòng)畫(huà)的元素,一滑動(dòng)就變成visibility:hidden,消失,煩死了,看官網(wǎng)也沒(méi)有類(lèi)似的demo,誰(shuí)碰到過(guò)類(lèi)似的問(wèn)題,能幫忙解決一下?謝了謝了
問(wèn)題解答
回答1:Swiper是在dom加載完畢后實(shí)例化的嗎?如果在元素尚未全部加載完的時(shí)候進(jìn)行實(shí)例化,設(shè)置了loop為true會(huì)使swiper-slide元素增加2個(gè),那么你加載圖片或是其他填充內(nèi)容的時(shí)候就導(dǎo)致數(shù)據(jù)不足(為了實(shí)現(xiàn)循環(huán)swiper自己增加了兩個(gè)dom來(lái)進(jìn)行模擬無(wú)縫切換),出現(xiàn)空白。建議在后進(jìn)行swiper的實(shí)例化。
相關(guān)文章:
1. android - weex 項(xiàng)目createInstanceReferenceError: Vue is not defined2. android - 哪位大神知道java后臺(tái)的api接口的對(duì)象傳到前端后輸入日期報(bào)錯(cuò),是什么情況?求大神指點(diǎn)3. pdo 寫(xiě)入到數(shù)據(jù)庫(kù)的內(nèi)容為中文的時(shí)候?qū)懭雭y碼4. PHPExcel表格導(dǎo)入數(shù)據(jù)庫(kù)怎么導(dǎo)入5. javascript - 如圖,百度首頁(yè),查看源代碼為什么什么都沒(méi)有?6. vue2.0+webpack 如何使用bootstrap?7. PHP類(lèi)封裝的插入數(shù)據(jù),總是插入不成功,返回false;8. mac連接阿里云docker集群,已經(jīng)卡了2天了,求問(wèn)?9. 只允許微信登錄設(shè)置在哪里實(shí)現(xiàn)?CI框架10. android - 安卓開(kāi)發(fā)使用微信開(kāi)放平臺(tái)分享功能,出現(xiàn)6M的內(nèi)存泄露
