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状态,如果这个过程通过某种方式反应在视图上了,那么 ...
随机推荐
- Docker-harbor-V1.3.0 ”私有仓库“搭建 Easy
准备: centos 7.0 Docker version 1.12.6 docker-compose version 1.19.0 1: updata-yum: 更新yum 源 ...
- python_os 的知识点
1. os.getcwd() #获得当前路径 2. os.listdir(path) #列出path路径下的所有目录名和文件名包括后缀 3. os.mkdir(path) #在path创建一个目录 4 ...
- 17.swoole学习笔记--异步mysql操作
<?php //异步mysql操作 $db=new swoole_mysql(); $config=[ 'host'=>'192.168.10.31', 'user'=>'zouke ...
- 7.Python列表
.button, #logout { color: #333; background-color: #fff; border-color: #ccc; } span#login_widget > ...
- C#不显示在任务栏
在我用c#写一些小程序是总是希望,程序窗体不在任务栏上显示程序的窗体,c# Form提供了一个 属性值可以很好的解决这个问题 这个属性就是 ShowInTaskbar 在微软的官方声明格式为: pub ...
- MySQLWorkbench注释
不改变快捷键配置文件基础上 1. 通过菜单操作 Edit -> Format -> Un/comment 2. 键盘 (Windows 10, 其他操作系统未试过) Ctrl + / ( ...
- 【剑指Offer】面试题04. 二维数组中的查找
题目 在一个 n * m 的二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 示例: 现 ...
- Kali链接Xshell和更新源
一.Xshell首次链接kali系统中的ssh Xshell:帮助我们去连接各种服务平台,方便管理服务器,链路可以加密处理(ssh/vsftp) 1.开启kali中的ssh服务,service ssh ...
- C语言数组的所有元素初始化成相同的值
这个问题一直困扰了我很久,我向来都用for来控制置-1:因为我不会用memset(つ﹏⊂)我是个蒟蒻.今天终于学会了一点皮毛,赶紧记录一下 方法一: 简单粗暴,快捷有效.for循环一点点的置1,这个方 ...
- UVA - 1610 Party Games（聚会游戏）（构造）
题意:输入一个n(2<=n<=1000,n是偶数)个字符串的集合D,找一个长度最短的字符串S(不一定在D中出现),使得D中恰好一半串小于等于S,另一半串大于S.如果有多解,输出字典序最小的 ...