<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动画封装的更多相关文章

  1. Vue动画操作

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

  2. iOS_SN_push/pop转场动画封装和一般动画封装

    封装类中的方法: #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface AnimationE ...

  3. vue动画的用法

    vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...

  4. vue动画及其原理

    1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2,  我们以两张 ...

  5. vue教程3-02 vue动画

    vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...

  6. vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)

    vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> & ...

  7. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  8. vue动画实现方式

    vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  9. vue动画理解,进入、离开、列表过度和路由切换。

    vue的动画对于很多初学者,甚至对很多老鸟来说也是很费劲,不容易控制的. 这篇文章讲vue动画的理解.其实没那么难. 动画理解 一个元素从A状态变成B状态,如果这个过程通过某种方式反应在视图上了,那么 ...

随机推荐

  1. Django(九)模型:dj查询数据库的函数(方法)

    一.查询函数 通过模型类.objects属性可以调用如下函数,实现对模型类对应的数据表的查询. 函数表 函数名 功能 返回值 说明 get 返回表中满足条件的一条且只能有一条数据. 返回值是一个模型类 ...

  2. NFS挂载共享文件夹

    修改rcS启动脚本,使开发板初始化完成,自动挂载共享文件夹 修改开发板ip,使之与虚拟机处于同一网段(二者可以互ping)     挂载虚拟机的共享文件夹     rcS 1 ifconfig eth ...

  3. P1002 写出这个数(Basic Level)

    转跳点:

  4. 解除TCL电视系统禁止adb安装

    我的问题:tcl电视能使用adb连接成功,但使用adb install安装软件时,提示错误 解决问题如下: $adb shell,输入:1. $setprop persist.tcl.debug.in ...

  5. 安装python包的两种方法

    1.在 anaconda 环境中安装包 selenium conda install selenium 2.python 下安装包 selenium pip install selenium 3.测试 ...

  6. Python 中使用动态创建类属性的机制实现接口之后的依赖

    我们在自动化测试中经常会需要关联用例处理,需要动态类属性: 推荐使用第二种方法: 创建:setattr() 获取:getattr() 两种,如何创建 类属性 loan_id # 第一种,创建 # 类名 ...

  7. FFT各种模板

    丑陋敬请谅解: 求两列数的卷积: 递归版: #include <stdio.h> #include <algorithm> #include <math.h> us ...

  8. js(JavaScript)使用${pageContext.request.contextPath}报错

    前几天写程序在js文件中用到了${pageContext.request.contextPath}然后一直报错,没有办法post到服务器,原来js把这个当成字符串了,一直以为他是jquery的函数! ...

  9. Django static配置

    STATIC_URL = '/static/' # HTML中使用的静态文件夹前缀 STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static&q ...

  10. 【剑指Offer】面试题07. 重建二叉树

    题目 输入某二叉树的前序遍历和中序遍历的结果,请重建该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字. 例如,给出 前序遍历 preorder = [3,9,20,15,7] 中序遍历 ...