[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即可实现轮 ...
随机推荐
- 01背包--小P寻宝记——粗心的基友
题目描写叙述 这对好基友他们在经历无数的艰难险阻后.最终找到了宝藏.无奈的是这一对好基友居然是一样的粗心,又忘记了带一个大一点的包包,可惜啊..选择又出现了啊.. 已知包的体积是v,每种宝贝仅仅有一种 ...
- Eclipse集成Resinserver
因为Resin在Eclipse下的表现丝毫不亚于Tomcat,小编决定带领众小弟一起学习使用Resin.虽然小编身边也没有什么大牛在使用Resin,但看到Resin的广告已经吹到天边了.所以还 ...
- springboot-quartz普通任务与可传参任务
两者区别与作用: 普通任务:总调度(SchedulerFactoryBean)--> 定时调度器(CronTriggerFactoryBean) --> 调度明细自定义执行方法bean(M ...
- .NET通用基本权限系统框架源代码
DEMO下载地址: http://download.csdn.net/detail/shecixiong/5372895 一.开发技术:B/S(.NET C# ) 1.Windows XP以上 (支援 ...
- [POJ 3565] Ant
[题目链接] http://poj.org/problem?id=3565 [算法] KM算法求最小匹配 [代码] #include <algorithm> #include <bi ...
- android有用代码片段
一. 获取系统版本号: [java] view plaincopy PackageInfo info = this.getPackageManager().getPackageInfo(this.g ...
- jFinal基于maven简单的demo
JFinal 是基于Java 语言的极速 web 开发框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restful.在拥有Java语言所有优势的同时再拥有ruby.py ...
- GStreamer系列 - 基本介绍
什么是Gstreamer? Gstreamer是一个支持Windows,Linux,Android, iOS的跨平台的多媒体框架,应用程序可以通过管道(Pipeline)的方式,将多媒体处理的各个步骤 ...
- hdu 4297
有两个基础需要掌握: RMQ,以及LCA. RMQ:dp[i][j]表示下标从i开始,长度为2^j的一段元素中的最值.则易得状态转移如下:dp[i][j]=max/min(dp[i][j-1],dp[ ...
- RabbitMQ 官方NET教程(一)【介绍】
本教程假定RabbitMQ已在标准端口(5672)上的localhost上安装并运行.如果使用不同的主机,端口或凭据,连接设置将需要调整. RabbitMQ是一个消息代理:它接受并转发消息. 您可以将 ...