[vuejs短文]使用vue-transition制作小小轮播图
提示
本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题.
会不断学习各种轮播图添加到本文当中
也有可能会上线,方便看效果
开始制作
超简易呼吸轮播
简单粗暴的使用vue transition制作的轮播图,这里解释一下原理
动画效果就像车辆穿行隧道,定好初始位置/最终位置,设定好运动规则,它就自动开了.
在下面的实例中,我们设定好了运行规则,和分别两种状态,它就开始自动运行了.
大家可以对照上图看一下,很容易的,图中的v代表transition标签中的name字段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
<style>
html,body,#app{
width : 100%;
height : 100%
}
.carousel-place{
position : relative;
width: 50%;
height : 500px;
margin : 0 auto;
}
.carousel-place img{
width: 100%;
height: 100%;
position : absolute
}
/* 第一组:带渐变效果 */
.fade-enter-active{
transition : all .5s ease
}
.fade-leave-active{
transition : all .5s ease
}
.fade-enter{
opacity : 0
}
.fade-leave-to{
opacity : 0
}
</style>
</head>
<body>
<div id="app">
<button @click = "prevImage">上一张</button>
<button @click = "nextImage">下一张</button>
<div class="carousel-place">
<transition name = "fade">
<img :src="path" v-for = "(path,index) in imagePlaces" v-if = "index == currentIndex" :key = "'image'+index">
</transition>
</div>
</div>
<script>
let vm = new Vue({
el : "#app",
data : {
imagePlaces : [
"./img/1.jpg",
"./img/2.jpg",
"./img/3.jpg",
"./img/4.jpg",
"./img/5.jpg"
],
currentIndex : 0,
slideName : "fade-slide"
},
methods : {
prevImage : function(){
if(this.currentIndex > 0){
this.currentIndex--
this.slideName = "fade-rslide"
}
},
nextImage : function(){
if(this.currentIndex < this.imagePlaces.length-1){
this.currentIndex++
this.slideName = "fade-slide"
}
}
}
})
</script>
</body>
</html>
双翼渐变式轮播
在这个轮播图里,我们transition的标签是动态的,在翻页函数运行的时候,会改变它的name,从而展现不同的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
<style>
html,body,#app{
width : 100%;
height : 100%
}
.carousel-place{
position : relative;
width: 50%;
height : 500px;
margin : 0 auto;
}
.carousel-place img{
width: 100%;
height: 100%;
position : absolute
}
/* 第一组:带渐变效果 */
.fade-enter-active{
transition : all .5s ease
}
.fade-leave-active{
transition : all .5s ease
}
.fade-enter{
opacity : 0
}
.fade-leave-to{
opacity : 0
}
/* 第二组:带滑动效果 */
.fade-slide-enter-active{
transition : all .5s ease
}
.fade-slide-leave-active{
transition : all .5s ease
}
.fade-slide-enter{
opacity : 0;
transform : translateX(-200px);
}
.fade-slide-leave-to{
opacity : 0;
transform : translateX(200px);
}
/*第三组:双翼滑动效果*/
.fade-rslide-enter-active{
transition : all .5s ease
}
.fade-rslide-leave-active{
transition : all .5s ease
}
.fade-rslide-enter{
opacity : 0;
transform : translateX(200px);
}
.fade-rslide-leave-to{
opacity : 0;
transform : translateX(-200px);
}
</style>
</head>
<body>
<div id="app">
<button @click = "prevImage">上一张</button>
<button @click = "nextImage">下一张</button>
<div class="carousel-place">
<transition name = "fade">
<img :src="path" v-for = "(path,index) in imagePlaces" v-if = "index == currentIndex" :key = "'image'+index">
</transition>
</div>
<button @click = "prevImage">上一张</button>
<button @click = "nextImage">下一张</button>
<div class="carousel-place">
<transition name = "fade-slide">
<img :src="path" v-for = "(path,index) in imagePlaces" v-if = "index == currentIndex" :key = "'image-slide'+index">
</transition>
</div>
<button @click = "prevImage">上一张</button>
<button @click = "nextImage">下一张</button>
<div class="carousel-place">
<transition :name = "slideName">
<img :src="path" v-for = "(path,index) in imagePlaces" v-if = "index == currentIndex" :key = "'image-dbslide'+index">
</transition>
</div>
</div>
<script>
let vm = new Vue({
el : "#app",
data : {
imagePlaces : [
"./img/1.jpg",
"./img/2.jpg",
"./img/3.jpg",
"./img/4.jpg",
"./img/5.jpg"
],
currentIndex : 0,
slideName : "fade-slide"
},
methods : {
prevImage : function(){
if(this.currentIndex > 0){
this.currentIndex--
this.slideName = "fade-rslide"
}
},
nextImage : function(){
if(this.currentIndex < this.imagePlaces.length-1){
this.currentIndex++
this.slideName = "fade-slide"
}
}
}
})
</script>
</body>
</html>
搜集素材中...
原文地址：https://segmentfault.com/a/1190000014089386
[vuejs短文]使用vue-transition制作小小轮播图的更多相关文章
- vue上的简单轮播图
好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用 ...
- （数据科学学习手札90）Python+Kepler.gl轻松制作时间轮播图
本文示例代码及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 Kepler.gl作为一款强大的开源地理信 ...
- 用JavaScript制作banner轮播图
JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...
- H5制作显示轮播图的方法Swiper
1.需要引入Swiper插件 <!-- swiper插件 --> <link rel="stylesheet" href="https://unpkg. ...
- vue渐变淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 如何使用微信小程序制作banner轮播图？
在前端工程师的工作中,banner是必不可少的,那缺少了DOM的小程序是如何实现banner图的呢?如同其他的框架封装了不同的banner图的方法,小程序也封装了banner的方法,来让我一一道来: ...
- 使用JQuery制作幻灯片(轮播图）
1.首先看一下目录结构 images文件夹放所需要播放的图片. js文件夹放jquery库和main.js 2.html代码: <!DOCTYPE html> <html lang= ...
- vue轮播图
vue开发中遇到这样一个需求实现导航栏和中间内容相结合实现页面滑动导航跟随改变的效果.看效果: 这里我用的是vue所带的插件:vue-awesome-swiper,传送门:https://www.np ...
- 用vue写一个仿简书的轮播图
原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...
随机推荐
- POJ 3233 Matrix Power Series 二分+矩阵乘法
链接:http://poj.org/problem?id=3233 题意:给一个N*N的矩阵(N<=30),求S = A + A^2 + A^3 + - + A^k(k<=10^9). 思 ...
- mysql高可用架构方案之中的一个(keepalived+主主双活)
Mysql双主双活+keepalived实现高可用 文件夹 1.前言... 4 2.方案... 4 2.1.环境及软件... 4 2.2.IP规划... 4 2.3.架构图... ...
- jenkins集成钉钉
1.创建通知人群组,添加机器人 2.2.获取自定义机器人webhook 3.jenkins 安装"Dingding[钉钉] Plugin"插件: 4.插件安装完成后,创建/修改任务 ...
- [odroid-pc] ubuntu12.04 android4.0移植到odroid-pc过程
參考:http://blog.csdn.net/sunnybeike/article/details/8098349 odroid prebuilt版 img下载地址:tag=ODROID-PC&q ...
- Spring为了简化java开发採用的四种策略
以下是<Spring in action>中的总结性语言,记录下来,作为研究源码的主要线索. 1.採用轻量级的pojo.最小侵入式编程. 2.依赖注入(DI)和面向接口编程实现松耦合. 3 ...
- hook 鼠标键盘消息实例分析
1.木马控制及通信方法包含:双管道,port重用.反弹技术.Hook技术,今天重点引用介绍一下hook的使用方法,hook信息后能够将结果发送到hacker邮箱等.实现攻击的目的. 转自:http:/ ...
- Codeforces Round #330 (Div. 2) D. Max and Bike 二分
D. Max and Bike For months Maxim has been coming to work on his favorite bicycle. And quite recently ...
- Codeforces Round #332 (Div. 2)D. Spongebob and Squares 数学
D. Spongebob and Squares Spongebob is already tired trying to reason his weird actions and calcula ...
- TF101出现“DMClient已停止”处理办法
设定->应用程式->全部->DMClient强制停止 然后 清除数据 然后 重开机 测试通过.
- git fetch批处理，遍历一个文件夹下的所有子目录，执行git fetch --all
echo off for /d %%i in (*) do ( echo %%i cd %%i git fetch --all cd .. ) 判断子目录是否有.git文件夹 echo off for ...