[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即可实现轮 ...
随机推荐
- DirectFB学习之移植到nuc972平台 标签： DirectFBlinux图形加速驱动【转】
本文转载自:http://blog.csdn.net/jxgz_leo/article/details/70137304 [nuc972开发板购买地址,感谢支持](https://shop102749 ...
- Codeforces--621B--Wet Shark and Bishops（数学）
B. Wet Shark and Bishops time limit per test 2 seconds memory limit per test 256 megabytes input ...
- P2932 [USACO09JAN]地震造成的破坏Earthquake Damage 爆搜
这题怎么这么水~~~本来以为挺难的一道题,结果随便一写就过了...本来还不知道损坏的牛棚算不算,结果不明不白就过了... 题干: 农夫John的农场遭受了一场地震.有一些牛棚遭到了损坏,但幸运地,所有 ...
- Java压缩技术（一） ZLib
原文:http://snowolf.iteye.com/blog/465433 有关ZLib可参见官方主页 http://www.zlib.net/ ZLib可以简单的理解为压缩/解压缩算法,它与ZI ...
- bzoj 1468 Tree(点分治模板)
1468: Tree Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 1527 Solved: 818[Submit][Status][Discuss] ...
- 机器学习——Day 2 简单线性回归
写在开头 由于某些原因开始了机器学习,为了更好的理解和深入的思考(记录)所以开始写博客. 学习教程来源于github的Avik-Jain的100-Days-Of-MLCode 英文版:https:// ...
- WinSocket简单聊天程序客户端
#pragma comment(lib,"Ws2_32.lib") #include <stdio.h> #include <Winsock2.h> SOC ...
- MySQL安装for windows
======MySQL安装 for windows====== 版本5.7.X MySQL服务器帮助我们来管理文件的操作 MySQL软件 - 服务器端软件 - 服务端程序 - 解析指令 - 对文件的操 ...
- Windows7下caffe-ssd-microsoft下编译
整个编译可谓漫长 编译了两天 网上教程也很多 但是也很杂 遇到各种错误 总归是编完了 1.下载Windows版本的Caffe-SSD源码 下载链接:https://github.com/conner9 ...
- jquery学习之$(document).ready()
参考资料: 1.W3School在线教程:http://www.w3school.com.cn/jquery/event_ready.asp 2.某人博客园:http://www.cnblogs.co ...