Vue动画封装
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"> </script>
</head>
<body>
<section class="app">
<fade :showw="show">
<article >hi</article>
</fade>
<button @click="handle">Select</button>
</section>
<script> Vue.component("fade", {
props:["showw"],
template: `<transition @before-enter="hanle"
@enter="handleenter"
@after-enter="after">
<slot v-if="showw"></slot>
</transition>`,
methods: {
hanle: function (el) {
el.style.color = "blue"
},
handleenter: function (el, done) {
setTimeout(() =>{
el.style.color= "green"
},2000)
setTimeout(() =>{ done()
},4000)
}
}
}) var vm = new Vue({
el:".app",
data: {
show: true
},
methods: {
handle: function () {
this.show = !this.show
}
}
})
</script>
</body>
封装待续
Vue动画封装的更多相关文章
- Vue动画操作
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- iOS_SN_push/pop转场动画封装和一般动画封装
封装类中的方法: #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface AnimationE ...
- vue动画的用法
vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...
- vue动画及其原理
1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2, 我们以两张 ...
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
- vue+elementUI封装的时间插件（有起始时间不能大于结束时间的验证）
vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> & ...
- JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- vue动画实现方式
vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- vue动画理解，进入、离开、列表过度和路由切换。
vue的动画对于很多初学者,甚至对很多老鸟来说也是很费劲,不容易控制的. 这篇文章讲vue动画的理解.其实没那么难. 动画理解 一个元素从A状态变成B状态,如果这个过程通过某种方式反应在视图上了,那么 ...
随机推荐
- Eclipse新建Maven中创建src文件夹报The folder is already a source folder错误解决办法
问题: 解决办法:右击项目->Build Path->Configure Build Path选择(missing)文件夹remove,然后重新New Source Folder
- 关于如何实现一个Saga分布式事务框架的思考
关于Saga模式的介绍,已经有一篇文章介绍的很清楚了,链接在这里:分布式事务:Saga模式. 关于TCC模式的介绍,也已经有一篇文章介绍的很清楚了,链接在这里:关于如何实现一个TCC分布式事务框架的一 ...
- 关于Arduino MEGA2560 看门狗对bootloader的依赖
bootloader在Arduino中起着至关重要的位置,arduino-1.5.6-r2版本中的bootloader对看门狗(watchdog)的bug进行了修复:mega2560其实就是使用的AV ...
- OI生涯回顾
OI回忆录只是一个预告,估计等2020高考结束才放出来吧. 先写一下自己简单的OI历程吧: 小升初刚起步 初一 第一次比赛,NOIP PJ组215分,踩线1=,全省rk86,全国rk677(毕竟AH ...
- 一百一十、SAP的OO-ALV之四，定义屏幕相关变量和逻辑流
一.代码如下,定义相关变量 二.来带屏幕页面,双击STATUS_9000和USER_COMMAND_9000,自动生成相应代码 三.点击是 四.会自动生产关联的Includ文件 五.我们自己创建一个M ...
- Swift Json解析与model互转
Json的解码与编码操作,这里使用swift自带的类JSONDecoder 和 JSONEncoder 1.基础处理 如果你的 JSON 数据结构和你使用的 Model 对象结构一致的话,那么解析过程 ...
- JAVA - SpringBoot项目引用generator生成 Mybatis文件
JAVA - SpringBoot项目引用generator生成 Mybatis文件 在spring官网https://start.spring.io/自动生成springboot项目,这里选择项目 ...
- 腾讯云服务器上搭建Jenkins配置邮箱通知
1,Jenkins 点击 系统管理 2,点击系统管理 3,配置系统管理员邮件地址 5,配置 Extended E-main Notification,(用户名不需要邮箱后缀“@163.com”, SS ...
- 代理模式（Proxy Pattern）C#版本的
引用地址 https://www.cnblogs.com/zhili/p/ProxyPattern.html --------------------------------------------- ...
- C++的随机数
C++产生随机数 C++中没有自带的random函数,要实现随机数的生成就需要使用rand()和srand(). 不过,由于rand()的内部实现是用线性同余法做的,所以生成的并不是真正的随机数,而是 ...