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状态,如果这个过程通过某种方式反应在视图上了,那么 ...
随机推荐
- 《ES6标准入门》(阮一峰)--9.数组的扩展
1.扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 ...
- Codeforces Round #622 (Div. 2) 题解和我的分析
首先下午场非常适合中国人,开心 A 三种食物有个数限制,上菜,每次上菜跟以前的样式不能一样(食物的种类及个数各不相同),且每种食物最多用一次,问最多能上几次 对a,b,c排序,然后枚举上菜种类就可以了 ...
- tab选项卡，不带自动切换定时器
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- WEB前段（HTML+JS），后端(MYSQL+PHP)开发基础
一.HTML HTML:超文本标记语言,可以加载JS/CSS/图片/链接等非文字的内容 一切的网页开发技术都需要建立在HTML的基础之上 HTML的结构和语法 HTML元素 注释: <!-- ...
- python中pip的安装问题
当系统中同时存在python2.python3的时候,在进行pip下载的时总出现不知道用哪个 情况,此时就需要这样做: python2 -m pip install numpy //使用pip给pyt ...
- Gym - 101190F Foreign Postcards （期望dp）
题意:有n张标有“C”或“F”的卡片. 1.随机取前k张(1<=k<=n) 2.若这k张的第一张为“C”,则不翻转,否则,全部翻转这k张. 3.然后处理剩下的n-k张 4.重复步骤1~3直 ...
- Spring Boot2（003）：简要回顾“HelloWorld” web 工程
1.注解: @RestController 和 @RequestMapping HelloWorldExample 中的第1个注解 @RestController 是一个被熟知的原型注解(stereo ...
- 简单的js队列
简单的js队列 /** * [Queue] * @param {[Int]} size [队列大小] */ function Queue(size) { var list = []; //向队列中添加 ...
- 二十五、SAP中输出一条横线
一.我们代码如下,这个是不输出横线的时候 效果如下 二.输出横线的代码如下 效果如下,多出一条横线
- java枚举类（转）
转自: http://blog.sina.com.cn/s/blog_697b968901013ih1.html 这里主要讲解的是Java的枚举类型 什么是枚举? 以我的理解答:枚举是我们自己定义的一 ...