[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即可实现轮 ...
随机推荐
- IntelliJ IDEA 14注冊码
User:xring Key:21423-V4P36-U7W8K-8CYUK-93HXA-MKGZ5 User:arix Key:52998-LJT74-J7YEX-UPVT3-Q5GUF-5G4B5 ...
- 《Google 软件测试之道》摘录
最近刚刚看完<Google 软件测试之道>,受益颇多,遂记录下: 只有在软件产品变得重要的时候质量才显得重要 第一章:谷歌软件测试介绍 角色介绍 SWE(Software Engineer ...
- Codeforces Round #281 (Div. 2) C. Vasya and Basketball 排序
C. Vasya and Basketball Vasya follows a basketball game and marks the distances from which each te ...
- C# WinForm小程序（技术改变世界-cnblog）
WinForm小程序(技术改变世界-cnblog) 需求: 1.点击按钮 更新 当前时间 2.输入 身份证,必须身份证 排序(类似银行卡那样的空格),自动生成空格排序 3.实现 必须按 第一个按 ...
- HDU 3887 Counting Offspring（DFS序+树状数组）
Counting Offspring Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- git 设定全局ignore
创建: 2017/08/08 位置: $HOME/.config/git/ignore git/ignore 要自建 内容 https://github.com/github/gitignore ...
- word2vec改进之Hierarchical Softmax
首先Hierarchical Softmax是word2vec的一种改进方式,因为传统的word2vec需要巨大的计算量,所以该方法主要有两个改进点: 1. 对于从输入层到隐藏层的映射,没有采取神经网 ...
- python 8：list.sort(reverse=false)、sorted(list, reverse=false)（对列表进行不可恢复排序；对列表进行可恢复排序）
bicycles = ['trek', 'cannondale', 'redline', 'specialized'] print(bicycles) print(sorted(bicycles)) ...
- 如何正确从windows系统（自己电脑）远程访问Linux系统（他人电脑）的mysql数据库（图文详解）
这里,需要Linux系统开了root用户,我这给root用户密码为root. 同时,在mysql -uroot -proot执行进去之后 update user setHost='%' whe ...
- WPF TextBox 仅允许输入数字
因为在 IValueConverter 实现中,当文本不能转换为目标类型时返回 DependencyProperty.UnsetValue ,Validation.GetHasError 返回 tru ...