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状态,如果这个过程通过某种方式反应在视图上了,那么 ...
随机推荐
- maven项目添加配置文件
1. 在src/main/resources下新建param.properties 2. 在param.properties文件中添加 mqtt.host=tcp://127.0.0.1:1883 m ...
- js实现连续输入之后发送请求
输入框是我们经常会用到的功能,想要实现输入就请求的功能 但是在实际开发中,为了减少服务器压力,会在输入之后停留1s没有输入之后再进行搜索 研究之后用原生js及表单写了一个简单的demo,如果有好的de ...
- Live555研究之一 源代码编译
Live555 是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输协议如RTP/RTCP.RTSP.SIP等的支持.Live555实现了对多种音视频编码格式的音视频数据的流化 ...
- SpringBoot 上传文件突然报错 Failed to parse multipart servlet request; nested exception is java.io.IOException: The temporary upload location [/tmp/tomcat.1428942566812653608
异常信息 org.springframework.web.multipart.MultipartException: Failed to parse multipart servlet request ...
- React 学习笔记（1） 基础语法和生命周期
参看:视频地址 简单搭建一个react-cli: 2. React.createElement() 将object转化为 React语法 import React from 'react' impor ...
- PhotoView 实现与图片进行简单的交互
本文的category是根据VIPhotoView来做参考,在此基础上添加个加载网络图片. 此category主要功能是与图片进行交互,双击放大图片,捏合等操作. 感谢vitoziv ! VIPhot ...
- Aspen安装过程报错总结
前几天一直帮朋友安装Aspen v11,因为之前的老版本总是报错,报错内容大概是证书过期了, 一开始朋友电脑上的老版本的Aspen 8卸载了,删除之前的数据库SqlServer 2012 ,然后重新安 ...
- 干货分享：如何搞定Essay Paragraph部分？
想要写出一篇高质量的留学生作业,首先要从写好段落(paragraph)开始.那么今天就随小编一起来看看,如何写好Paragraph部分? 段落:在英文中我们俗称为paragraph,而一篇英文文章通常 ...
- Git提交出现error: src refspec master does not match any的问题
在本地与远程分别新建了一个仓库并且关联后,想要把本地的文件提交到github上面, 输入下方命令后没有成功,而是出现了报错:error: src refspec master does not mat ...
- C# Stream篇（五） -- MemoryStream
MemoryStream 目录: 1 简单介绍一下MemoryStream 2 MemoryStream和FileStream的区别 3 通过部分源码深入了解下MemoryStream 4 分析Mem ...