Vue可复用过渡和动态过渡
前面的话
本文将详细介绍Vue可复用过渡和动态过渡
可复用过渡
过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，需要做的就是将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了
Vue.component('my-transition', {
template: `
<transition name="transition1" mode="out-in" @before-enter="beforeEnter" @after-enter="afterEnter">
<slot></slot>
</transition>
`,
methods: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
})
函数组件更适合完成这个任务
Vue.component('my-special-transition', {
functional: true,
render: function (createElement, context) {
var data = {
props: {
name: 'very-special-transition',
mode: 'out-in'
},
on: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
}
return createElement('transition', data, context.children)
}
})
动态过渡
在 Vue 中即使是过渡也是数据驱动的！动态过渡最基本的例子是通过 name 特性来绑定动态值
<transition v-bind:name="transitionName">
<!-- ... -->
</transition>
用 Vue 的过渡系统来定义的 CSS 过渡/动画 在不同过渡间切换会非常有用
所有的过渡特性都是动态绑定。它不仅是简单的特性，通过事件的钩子函数方法，可以在获取到相应上下文数据。这意味着，可以根据组件的状态通过 JavaScript 过渡设置不同的过渡效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="dynamic-fade-demo" class="demo">
Fade In: <input type="range" v-model="fadeInDuration" min="0" :max="maxFadeDuration">
Fade Out: <input type="range" v-model="fadeOutDuration" min="0" :max="maxFadeDuration">
<transition :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<p v-if="show">小火柴的蓝色理想</p>
</transition>
<button v-if="stop" @click="stop = show = false">运行动画</button>
<button v-else @click="stop = true">停止动画</button>
</div>
<script type="text/javascript" src="velocity.min.js"></script>
<script type="text/javascript" src="vue.js"></script>
<script>
new Vue({
el: '#dynamic-fade-demo',
data: {
show: true,
fadeInDuration: 1000,
fadeOutDuration: 1000,
maxFadeDuration: 1500,
stop: true
},
mounted() {
this.show = false
},
methods: {
beforeEnter(el) {
el.style.opacity = 0
},
enter(el, done) {
Velocity(el,{ opacity: 1 },{duration: this.fadeInDuration,complete:()=>{
done();
if (!this.stop){
this.show = false;
}
}
})
},
leave(el, done) {
Velocity(el,{ opacity: 0 },{duration: this.fadeOutDuration,complete:()=>{
done();
this.show = true;
}
})
},
},
})
</script>
</body>
</html>
Vue可复用过渡和动态过渡的更多相关文章
- vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
- vue 组件复用 - component
vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...
- vue获得当前页面URL动态拼接URL复制邀请链接方法
vue获得当前页面URL动态拼接URL复制邀请链接方法 当前页面完整url可以用 location.href路由路径可以用 this.$route.path路由路径参数 this.$route.par ...
- 在微信框架模块中，基于Vue&Element前端，通过动态构建投票选项，实现单选、复选的投票操作
最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...
- （学习心路历程）Vue过渡/动画 VS. 过渡/动画
[此篇为本人的个人见解和哔哔赖赖,如果有观点不对的地方,还请大家指出来哇!!] 最近实习在做一个项目,里面应用的动画效果还蛮复杂的,因为本身对Vue框架比较熟悉,所以最终选择了Vue框架. 自己之前从 ...
- 058_末晨曦Vue技术_过渡 & 动画之过渡的类名
进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class ...
- Vue学习笔记【18】——Vue中的动画（使用过渡类名）
为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能: 使用过渡类名 步骤分析 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 1. 使用 transition 元素, ...
- 牛逼的css3:动态过渡与图形变换
写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...
- vue首次加载白屏过渡动画（vue优化）
过渡动画需要在index.html文件里面添加 1.css,在public.index.css创建index.css html, body, #app { height: 100%; margin: ...
随机推荐
- mysql存储引擎之MyISAM 和 InnoDB的比较
一.什么是存储引擎 存储引擎说白了就是如何存储数据.如何为存储的数据建立索引和如何更新.查询数据等技术的实现方法.因为在关系数据库中数据的存储是以表的形式存储的,所以存储引擎也可以称为表类型(即存储和 ...
- ADO.NET 中可以发送包含多个SQL语句的批处理脚本到SQL Server，但是用MySQL的ODBC驱动不行
众所周知,我们在ADO.NET中可以使用NuGet包System.Data.SqlClient来操作SQL Server,并且ADO.NET是支持向SQL Server发送包含多个SQL语句的批处理脚 ...
- Java函数式编程和lambda表达式
为什么要使用函数式编程 函数式编程更多时候是一种编程的思维方式,是种方法论.函数式与命令式编程的区别主要在于:函数式编程是告诉代码你要做什么,而命令式编程则是告诉代码要怎么做.说白了,函数式编程是基于 ...
- 【C#复习总结】析构函数
上篇提到析构函数,就顺便复习一下. 一 C# 析构函数 1.1 析构函数的定义 析构函数用于释放被占用的系统资源. 析构函数的名字由符号“-”加类名组成. 1.2 析构函数注意的问题 使用析构函数时, ...
- VUE工程上线首页加载慢问题优化
使用webpack-bundle-analyzer工具 下面介绍几种压缩文件的方式. 1.vue-router懒加载 2.工程文件打包的时候不生成.map文件 3.gzip压缩 4.CDN 5.VUE ...
- 全局关键字搜索：Element UI Table内容过滤\jQuery过滤器fastLiveFilter插件\BootstrapVue插件;
```html data:{ resultMaster: [], otableData:[], schfilter:'' } watch: { schfilter: function(val, old ...
- 简单QR分解之Gram-Schmit正交化&&Householder变换&&Givens Rotation变换&&计算步骤
- 助教总结 -【福大软工实践-2017-2018-K班】
助教总结 -[福大软工实践-2017-2018-K班] 非常抱歉这么晚才来写总结! 助教工作 助教共发表博客39篇. 助教共点评约500条. 起步 对于常规课程的起步,通常都是在第一次课堂上由老师对课 ...
- threading模块，python下的多线程
一.GIL全局解释器锁 In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple nativ ...
- 在做stark中一些反射的问题。
hasattr(obj,name): 判断一个对象里面是否有name属性或者name方法,返回BOOL值,有name特性返回True, 否则返回False.需要注意的是name要用括号括起来 1 ...