Vue入门笔记#过渡
在使用的目标标签里添加 transition:
<div transition="my_transition"></div> |
https://jsfiddle.net/miloer/n282tqwv/
它还可以和v-if,v-show,v-for,动态组件一起使用。
官方对Vue过渡过程的讲解:
- 尝试以 ID
"my-transition"
查找 JavaScript 过渡钩子对象——通过Vue.transition(id, hooks)
或transitions
选项注册。如果找到了,将在过渡的不同阶段调用相应的钩子。 - 自动嗅探目标元素是否有 CSS 过渡或动画,并在合适时添加/删除 CSS 类名。
- 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作(插入/删除)在下一帧中立即执行。
还可以利用javascript钩子来实现过渡,一开始我把钩子写在里面了,它放在外面。
官方CSS块代码有个这样的注释:
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
这个就是动画结束后的最终状态,我觉得它只是一个局部状态,最终还是受目标标签里的代码约束的。
https://jsfiddle.net/miloer/n282tqwv/1/
过渡的CSS名,
类名的添加和切换取决于 transition
特性的值。比如 transition="fade"
,会有三个 CSS 类名:
.fade-transition
始终保留在元素上。.fade-enter
定义进入过渡的开始状态。只应用一帧然后立即删除。.fade-leave
定义离开过渡的结束状态。在离开过渡开始时生效,在它结束后删除。
如果 transition
特性没有值,类名默认是 .v-transition
, .v-enter
和 .v-leave
。
官方的流程详解,我觉得挺好
当 show 属性改变时,Vue.js 将相应地插入或删除div元素,按照如下规则改变过渡的 CSS 类名:
如果 show 变为 false,Vue.js 将:
- 用 beforeLeave 钩子;
- 添加 v-leave 类名到元素上以触发过渡;
- 调用 leave 钩子;
- 等待过渡结束(监听 transitionend 事件);
- 从 DOM 中删除元素并删除 v-leave 类名;
- 调用 afterLeave 钩子。
如果 show 变为 true,Vue.js 将:
- 调用 beforeEnter 钩子;
- 添加 v-enter 类名到元素上;
- 把它插入 DOM;
- 调用 enter 钩子;
- 强制一次CSS 布局,让 v-enter 确实生效。然后删除 v-enter 类名,以触发过渡,回到元素的原始状态;
- 等待过渡结束;
- 调用afterEnter钩子。
在加一个官方的小例子,整理出来:https://jsfiddle.net/miloer/7zjq41mz/
Vue入门笔记#过渡的更多相关文章
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- 后端小白的VUE入门笔记, 前端高能慎入
因为项目需要前后端分离,后端竟然不用控制view层了,页面的跳转后端不再干涉,(前端的vue经过打包后成了一张index.html) 后端只需要响应给前端json串就ok,其实这不是爽歪歪?但是觉得还 ...
- Vue入门笔记#数据绑定语法
#数据绑定语法# #文本: 数据绑定的基础表型形式,使用“Mustache”语法(双大括号)(特意查了一下Mustache同“moustache”释义为:髭:上唇的胡子,小胡子,最起码我觉得挺形象的) ...
- Vue入门笔记(一)--基础部分
github地址:https://github.com/iTao9354/basicVue(demo01-28) 一.初识Vue 使用双大括号{{message}}将数据渲染进DOM中. 可 ...
- vue入门笔记
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...
- 后端小白的VUE入门笔记, 进阶篇
使用 vue-cli( 脚手架) 搭建项目 基于vue-cli 创建一个模板项目 通过 npm root -g 可以查看vue全局安装目录,进而知道自己有没有安装vue-cli 如果没有安装的话,使用 ...
- vue入门笔记(新手入门必看)
一.什么是Vue? 1. vue为我们提供了构建用户界面的渐进式框架,让我们不再去操作dom元素,直接对数据进行操作,让程序员不再浪费时间和精力在操作dom元素上,解放了双手,程序员只需要关心业 ...
- Vue入门笔记(二)--基础部分之条件渲染
github地址:https://github.com/iTao9354/basicVue/tree/master/conditional%20rendering(demo01-03) 一.v-if ...
- 学习Vue 入门到实战——学习笔记
闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...
随机推荐
- 时间和日期控件(Calendar1)
取得选择的: taskItem["data"] = Calendar1.SelectedDate.ToShortDateString();
- struts2 模型驱动
public class User3Action extends ActionSupport implements ModelDriven<User> { private User use ...
- 十一天 python操作rabbitmq、redis
1.启动rabbimq.mysql 在""运行""里输入services.msc,找到rabbimq.mysql启动即可 2.启动redis 管理员进入cmd, ...
- strcpy vs memcpy
[本文连接] http://www.cnblogs.com/hellogiser/p/strcpy_vs_memcpy.html [分析] strcpy和memcpy都是标准C库函数,它们有下面的特点 ...
- MongoDB 副本集管理(不定时更新)
简介: 前面介绍完了副本集的搭建.用户的管理.参数和日常操作的说明,那副本集搭建好该如何管理呢?现在来说明下副本集的日常查看和管理. 说明: 1)查看命令行参数:db.serverCmdLineOpt ...
- 插头DP专题
建议入门的人先看cd琦的<基于连通性状态压缩的动态规划问题>.事半功倍. 插头DP其实是比较久以前听说的一个东西,当初是水了几道水题,最近打算温习一下,顺便看下能否入门之类. 插头DP建议 ...
- 【编程题目】n 支队伍比赛,分别编号为 0,1,2。。。。n-1,已知它们之间的实力对比关系,
36.引用自网友:longzuo(运算)谷歌笔试: 19n 支队伍比赛,分别编号为 0,1,2....n-1,已知它们之间的实力对比关系,存储在一个二维数组 w[n][n]中,w[i][j] 的值代表 ...
- NCPC 2015 October 10, 2015 Problem D
NCPC 2015Problem DDisastrous DowntimeProblem ID: downtimeClaus Rebler, cc-by-saYou’re investigating ...
- iOS 没有安装对应客户端,不应显示对应的图标
现在很多APP为了让用户更加快捷方便注册,都会使用第三方进行登录,例如QQ/微信/淘宝等.但是上线审核被拒,大致会出现以下内容: Additionally, we found that your ap ...
- ajax+bootstrap做弹窗
建页面,引入bootstrap弹窗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...