Swiper+animate 使用笔记
Swiper 滑动插件使用
主要学习了 Swiper Animate 使用方法
地址https://www.swiper.com.cn/usage/animate/index.html
Swiper Animate 是 Swiper 中文网提供的用于在 Swiper 内快速制作 CSS3 动画效果的小插件，适用于 Swiper2.x、Swiper3.x 和 Swiper4.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', {}) //实例化
注:实例化后对象查看官方 API https://www.swiper.com.cn/api/index.html
使用总结
1 实例化需要在 dom 渲染完成后执行, vue mounted (){} ;钩子函数中使用
2 注意需要包裹两个壳!
swiper_tip.png
红色框 表示最外层,他需要添加 css overflow: hidden; 注意不需要设置高度.
绿色框 表示显示内容, 这里我设置高度为可视区高度 height:100vh;
-
粉色框 表示子项内容 可以在里面任意撸 html 代码
注: 上面的框分别是 app.vue 未最外层, 设置 index.vue 包裹所有子项
添加动画
根据官方手册 我们需要引入
swiper.animate.min.js和animate.min.css最后在 item 子项添加样式就好了
注意 需要添加 class 样式
<h1
class="ani animated"
swiper-animate-effect="rotateIn"
swiper-animate-duration="1s"
swiper-animate-delay="0s"
>
Swiper
</h1>
- 特别需要注意 class="ani animated" 是一定要加的 缺一不可
- 动画使用 https://daneden.github.io/animate.css/
- swiper-animate-effect 表示执行的动画名称;
- swiper-animate-duration 表示动画执行时间
- swiper-animate-delay 动画延时执行 (以单个页面计算,就不需要去计算上一个页面的动画时间)
- 另外需要注意的是执行动画的元素不能是行内元素
总结
对于个人来说又一阶段的实训已经结束，明显感觉到自己落下了很多东西没有深入挖掘，许多的知识点还是掌握的不太牢固。在以后的学习生活中，我会跟加努力的挖掘出更多的知识，课外知识是庞大的一个体系，我要努力进军其中，努力提高自己的能力。
