先甩解決方法，就是 motion-ui 沒有正確引入。

解決方法有兩種

• 不用動畫
  

• 正確引入 css 和 js 文件

不用動畫

追加 data-orbit data-use-m-u-i="false"?屬性

<div class="orbit" role="region" aria-label="說明"

????????data-orbit data-use-m-u-i="false"> <!-- 這里 -->

</div>

不用動畫自然就不會因為動畫問題卡住

正確引入 motion-ui

motion-ui?的 js 文件 可以在 foundation?之前使用 async?模式載入，記得引入 css?文件

我用的是 npm 安裝的包，引入方法為

require("motion-ui/dist/motion????-ui.min.css")

window.MotionUI = require("motion-ui");

正確引入后還不行就看看是不是 html 結(jié)構(gòu)有問題了

我在寫自己項目的主頁時發(fā)現(xiàn)一個問題，因為我是用 foundation 6 寫頁面的，所以我直接復(fù)制了官網(wǎng)文檔上幻燈片控件的代碼下來。

結(jié)果控件在切換下一頁時會背景透明并且重疊在上一頁上。這里我發(fā)現(xiàn)沒有在 `.orbit-controls` 之前包一層 .orbit-wrapper 導致的

正確的結(jié)構(gòu)是這樣的

<div class="orbit" role="region" aria-label="說明" data-orbit data-use-m-u-i="false">

????????<div class="orbit-wrapper">

????????????????<div class="orbit-controls">

????????????????</div>

????????</div>

</div>

接著就是切換到下一頁時成功了，但是也卡住了，不能回去，也不能繼續(xù)。

這里我發(fā)現(xiàn)是追加了幾個 motion-ui? 相關(guān)的類，于是就推斷是動畫庫的問題。于是我載入了這個庫。并且由于我使用 webpack?打包的，愣是忘了要引入 css?文件，只引入了 js 文件，害我 debug 了幾小時才發(fā)現(xiàn)是樣式?jīng)]引入 :(