文章詳情頁
swiper循環和動畫沖突
瀏覽:126日期:2024-05-26 13:11:45
問題描述
使用swiper,給滑塊子元素加了一個bounceRight的動畫,loop設置成false,沒有問題,但是想要的效果是循環滾動,loop設置成true時,像右滑動時,每次循環回來滾到第一個滑塊,雖然動畫還在,但是當滑動時候,加了動畫的元素就消失了,向左邊滑動時候,每次循環滾動到第三個滑塊也是一樣,動畫在,開始滑動時,子元素就消失。
看谷歌控制臺,子元素的css屬性因為加了ani類,每次到首尾相接時候設置了動畫的元素,一滑動就變成visibility:hidden,消失,煩死了,看官網也沒有類似的demo,誰碰到過類似的問題,能幫忙解決一下?謝了謝了
問題解答
回答1:Swiper是在dom加載完畢后實例化的嗎?如果在元素尚未全部加載完的時候進行實例化,設置了loop為true會使swiper-slide元素增加2個,那么你加載圖片或是其他填充內容的時候就導致數據不足(為了實現循環swiper自己增加了兩個dom來進行模擬無縫切換),出現空白。建議在后進行swiper的實例化。
相關文章:
1. javascript - 關于<a>元素與<input>元素的JS事件運行問題2. css3 - 純css實現點擊特效3. MySQL中的enum類型有什么優點?4. android下css3動畫非常卡,GPU也不差啊5. java - 為什么第一個線程已經釋放了鎖,第二個線程卻不行?6. mysql - 記得以前在哪里看過一個估算時間的網站7. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風格檢查怎么辦。。。8. 大家好,我想請問一下怎么做搜索欄能夠搜索到自己網站的內容。9. python - 啟動Eric6時報錯:’qscintilla_zh_CN’ could not be loaded10. mysql - 查詢字段做了索引為什么不起效,還有查詢一個月的時候數據都是全部出來的,如果分拆3次的話就沒問題,為什么呢。
排行榜
