[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即可实现轮 ...
随机推荐
- VCenter中嵌套openstack VM不能ping通外部网络问题解决的方法
问题描写叙述: 近期搭建了vCenter环境,并使用vCenter创建的VM搭建了一套openstack环境.在验证openstack的外网功能时.发现报文死活ping不通外网,抓包发现报文在vcen ...
- 请求文件下载URL过长处理
/* * PostNewWin * Author:ppchen */var PostNewWin = function(url){ var urlArr = url.split("?& ...
- Java-CyclicBarrier的简单样例
内容:一个主任务等待两个子任务,通过CyclicBarrier的await()实现.此Runnable任务在CyclicBarrier的数目达到后,全部其他线程被唤醒前被运行. public clas ...
- WebView 用法总结
1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出 Web page not available 错误. ...
- alsa 用户空间编程【转】
本文转载自:http://blog.csdn.net/sjin_1314/article/details/12872581 /**alsa play test *ALSA用户空间编译,ALSA驱动的声 ...
- HP Unix vsftp服务配置
HP Unix vsftp 服务配置: /opt/ssh/utils/ssh_chroot_setup.sh 运行脚本,会提示输入要建立的vsftp账号和要限制的家目录, 比如要限制的家目录为/Jia ...
- 地图使用-----MapKit介绍
一.MapKit介绍 1.苹果自带地图功能(高德地图),可以提供地图展示,查询,定位,导航等功能.使用MapKit框架实现地图功能,MapKit框架中所有数据类型的前缀都是MK 2.MapKit有一个 ...
- git拉取远端改变，但是不覆盖本地的修改
1.git stash 2.git fetch weixin-old-remote 3.git rebase weixin-old-remote/main151028_wxpay_main15100 ...
- 洛谷P1077 摆花(背包dp)
P1077 摆花 题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m盆.通过调查顾客的喜好,小明列出了顾客最喜欢的n种花,从1到n标号.为了在门口展出更多种花,规定第i种花不能 ...
- ACM_城市交通线（简单并查集）
城市交通线 Time Limit: 2000/1000ms (Java/Others) Problem Description: A国有n座城市,编号为1~n,这n个城市之间没有任何交通线路,所以不同 ...