Swiper+animate 使用筆記
Swiper 滑動(dòng)插件使用
主要學(xué)習(xí)了 Swiper Animate 使用方法
地址https://www.swiper.com.cn/usage/animate/index.html
Swiper Animate 是 Swiper 中文網(wǎng)提供的用于在 Swiper 內(nèi)快速制作 CSS3 動(dòng)畫(huà)效果的小插件耐亏，適用于 Swiper2.x共缕、Swiper3.x 和 Swiper4.x 。
學(xué)習(xí)路線
- 安裝 vue 腳手架
$ npm init webpack test
- 配置 scss
$ npm install --save-dev sass-loader
//sass-loader依賴于node-sass
$ npm install --save-dev node-sass
- 修改配置文件
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
- 安裝 swiper
$ npm install swiper
- 按Swiper 官方 Api 引入
<link rel="stylesheet" href="./static/animate.min.css" />
...
<script src="./static/swiper.animate.min.js"></script>
//App.vue
import Swiper from 'swiper' //在app.vue引入
new Swiper('.swiper-container', {}) //實(shí)例化
注:實(shí)例化后對(duì)象查看官方 API https://www.swiper.com.cn/api/index.html
使用總結(jié)
1 實(shí)例化需要在 dom 渲染完成后執(zhí)行, vue mounted (){} ;鉤子函數(shù)中使用
2 注意需要包裹兩個(gè)殼!
紅色框 表示最外層,他需要添加 css overflow: hidden; 注意不需要設(shè)置高度.
綠色框 表示顯示內(nèi)容, 這里我設(shè)置高度為可視區(qū)高度 height:100vh;
-
粉色框 表示子項(xiàng)內(nèi)容 可以在里面任意擼 html 代碼
注: 上面的框分別是 app.vue 未最外層, 設(shè)置 index.vue 包裹所有子項(xiàng)
添加動(dòng)畫(huà)
根據(jù)官方手冊(cè) 我們需要引入
swiper.animate.min.js和animate.min.css最后在 item 子項(xiàng)添加樣式就好了
注意 需要添加 class 樣式
<h1
class="ani animated"
swiper-animate-effect="rotateIn"
swiper-animate-duration="1s"
swiper-animate-delay="0s"
>
Swiper
</h1>
- 特別需要注意 class="ani animated" 是一定要加的 缺一不可
- 動(dòng)畫(huà)使用 https://daneden.github.io/animate.css/
- swiper-animate-effect 表示執(zhí)行的動(dòng)畫(huà)名稱;
- swiper-animate-duration 表示動(dòng)畫(huà)執(zhí)行時(shí)間
- swiper-animate-delay 動(dòng)畫(huà)延時(shí)執(zhí)行 (以單個(gè)頁(yè)面計(jì)算,就不需要去計(jì)算上一個(gè)頁(yè)面的動(dòng)畫(huà)時(shí)間)
- 另外需要注意的是執(zhí)行動(dòng)畫(huà)的元素不能是行內(nèi)元素
總結(jié)
對(duì)于個(gè)人來(lái)說(shuō)又一階段的實(shí)訓(xùn)已經(jīng)結(jié)束静檬，明顯感覺(jué)到自己落下了很多東西沒(méi)有深入挖掘炭懊，許多的知識(shí)點(diǎn)還是掌握的不太牢固。在以后的學(xué)習(xí)生活中拂檩，我會(huì)跟加努力的挖掘出更多的知識(shí)侮腹，課外知識(shí)是龐大的一個(gè)體系，我要努力進(jìn)軍其中稻励，努力提高自己的能力父阻。
