vue2 过渡 轮播图
---恢复内容开始---
Vue主要渲染条件:
v-if:是将元素删除再创造出来进行渲染。
v-show:是将元素的display=none掉,再进行渲染;
要点知识:v-key:唯一元素标识,若不设置v-key,相同的名字的标签不会被从新渲染,只会瞬间改变内容。这个非常有用,轮播图就靠它了。
只有满足将dom元素删除(v-if类似)或者display:none(v-show类似)掉,才会渲染。只改变位置,或者颜色等其他,是不会被渲染的,但这种情况,直接使用普通方法就好了,没必要用vue的过渡模式。
两个标签:
transition标签:将需要过渡的元素放在里面,就能进行过渡,但里面过渡的标签实际只有一个,按条件显示到底是哪一个标签。
transition-group:里面可以放很多元素,v-for出来的元素必须放里面。里面可以设置个tag=‘p’,当显示在浏览器中时,就变成p标签。里面的元素必须设置v-key。
两种方式:
javascript钩子:在javascript中设置过度阶段属性。
css方式:在css中设置过度阶段属性。
四个阶段:
1、enter:元素开始渲染的状态,还没有渲染。
2、enter-to(active):这两个区别搞不明白,这个不行就换另一个。就是目标状态,从enter 到enter-to的状态,transition:all 3s就写在这个状态下。
3、leave:开始删除或者隐藏元素,开始前的位置或者状态。
4、leave-to(active):到达这个状态时元素被删除或者隐藏。是过度状态。跟2相同。
无缝轮播图类型:这儿做一张图可见、有圆点,点击可选择图片、左右点击可切换,一共7张图,清理bug。
思路:
首先要明白渲染条件:见vue的渲染条件。
主要思路:轮播图中,它显示的那张图片在浏览器中可以看到有dom元素。隐藏的是没有dom元素的。所以如果显示一张图片,实际上,轮播列表中只有一个元素是存在的,其他的都被删掉了。按照这个思路,就很简单了。想要轮播,设置:enter:右边→enter-to:正常位置,并且过渡完成→leave:正常位置→leave-to:左边,并且过渡完成。
需了解:当它开始渲染新的一张的时候,旧的那一张会与新的一张同时存在,这就有2个元素。当旧的那一张过渡时间完成后,就会被删除。
代码如下:
html:
javascript:
遗留问题:
当使用transitionend事件代替定时器触发图片运动后执行代码时,发现并不理想,有时候运动结束后并不能触发@transitionend事件,猜测是过渡时出现了2个img元素,transitionend会分别探测2个元素动画结束,如果有2中style过度,就是应该一次动画触发4次transitionend,但触发次数并不是稳定在4次,非常奇怪。
还有种方式就是不用position,使用transform,但是很遗憾,ie貌似并不支持。
v-enter-to与v-enter-active区别不明。如果enter-to是代替enter-active的,那在transition-group中,enter-to是不比enter-active好用的,官网的例子可以说明。
vue2 过渡 轮播图的更多相关文章
- Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
- vue2.0 + vux (五)api接口封装 及 首页 轮播图制作
1.安装 jquery 和 whatwg-fetch (优雅的异步请求API) npm install jquery --save npm install whatwg-fetch --save 2. ...
- vue2 使用 swiper 轮播图效果
第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
- 【jQuery】百分比自适应屏幕轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3+JS切割轮播图
以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...
- C3属性的轮播图(持续更新)
天气好冷,都不想写代码.就先写个没有焦点的轮播图,过两天在补全. 用的是CSS3的属性 过渡transition 和 转换 transfrom:translateX() 只做了轮播和 鼠标进入停止轮播 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...
- css动画属性--轮播图效果
通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
随机推荐
- 导弹拦截(pascal)
导弹拦截 [问题描述] 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕 ...
- SQLServer复习文档1(with C#)
目录: 前言 SQL Server基础准备 1.新建数据库 2.在数据中添加表 3.向表中添加数据 SQL Server与C#基础准备 实例解析 1.C#连接数据库 2.查询特定列数据 3.使用列别名 ...
- SSM框架开发web项目系列(三) MyBatis之resultMap及关联映射
前言 在上篇MyBatis基础篇中我们独立使用MyBatis构建了一个简单的数据库访问程序,可以实现单表的基本增删改查等操作,通过该实例我们可以初步了解MyBatis操作数据库需要的一些组成部分(配置 ...
- tyvj4869 罪犯分组
看数据范围,果断状压.真是比愤怒的小鸟还智障..... #include<bits/stdc++.h> using namespace std; #define MAXN 500000+1 ...
- Python爬虫(十三)_案例:使用XPath的爬虫
本篇是使用XPath的案例,更多内容请参考:Python学习指南 案例:使用XPath的爬虫 现在我们用XPath来做一个简单的爬虫,我们尝试爬取某个贴吧里的所有帖子且将该帖子里每个楼层发布的图片下载 ...
- 1267 - Illegal mix of collations (gbk_chinese_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation '=' | 1267 - Illegal mix of collations (gbk_chinese_ci,IMPLICIT) and (Latin,COERCIBL)
select * FROM information_schema.columns WHERE table_schema = "databaseName" and collation ...
- spark-submit参数说明--on YARN
示例: spark-submit [--option value] <application jar> [application arguments] 参数名称 含义 --master M ...
- linux根目录扩容
原来在ucloud上面买了一个服务器,结果根目录上面只有20G,/data挂载点下面有500G,没多久/根目录存储空间用完了,所以要扩展 linux的文件模式分为lvm模式和普通的非lvm模式,云服务 ...
- Lvs+keepAlived实现负载均衡高可用集群(DR实现)
第1章 LVS 简介 1.1 LVS介绍 LVS是Linux Virtual Server的简写,意为Linux虚拟服务器,是虚拟的服务器集群系统,可在UNIX/LINUX平台下实现负载均衡集群功能. ...
- Python3 将txt数据转换成列表,进行排序,筛选
Python 程序员需要知道的 30 个技巧 首先是数据: 将上边的四个数据分别写在新建的txt文件中 1.将txt数据转为列表 with open('james.txt') as jaf: data ...