<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. 超低功耗2.4G收发一体： SI24R1

    Si24R1是一颗工作在2.4GHz ISM频段,专为低功耗无线场合设计,集成嵌入式ARQ基带协议引擎的无线收发器芯片.工作频率范围为2400MHz-2525MHz,共有126个1MHz带宽的信道.同 ...

  2. HDU 4893 2014多校三 线段树

    给定一个初始都为0的序列,有三种操作,前两种比较正常,一个是对某个位置的数add k,另一个是query区间和.然后比较麻烦的是第三个操作,把某个区间里面的每个值改成离它最近的Fibonacci数,如 ...

  3. 如何有效避免Essay写作抄袭

    每到学期末的时候,各种考试,论文以及作业数不胜数,压得留学党们快要喘不过气了.我想比起写论文,同学们更操心的问题应该是:Plagiarism.要知道在国外Plagiarism的这种行为在学术中是零容忍 ...

  4. 一、VIP课程：互联网工程专题 05-快速掌握Jenkins原理与核心功能

    第五课:快速掌握jenkins核心功能.docx 2.164 (2019-02) and newer: Java 8 or Java 11 一.jenkins 概述与环境配置 知识点: 关于可持续化集 ...

  5. 【剑指Offer】面试题52. 两个链表的第一个公共节点

    题目 输入两个链表,找出它们的第一个公共节点. 如下面的两个链表: 在节点 c1 开始相交. 示例 1: 输入:intersectVal = 8, listA = [4,1,8,4,5], listB ...

  6. 【Android】家庭记账本手机版开发报告三

    一.说在前面 昨天 对第一天的框架结构进行了四方面的完善 今天 对界面显示和逻辑结构进行完善 问题 无 二.界面展示完善 1.使用可回收的列表recyclerView展示账单的信息,并设置数据项为卡片 ...

  7. POJ 2586：Y2K Accounting Bug

    Y2K Accounting Bug Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11297   Accepted: 56 ...

  8. zookeeper 安装及集群

    一.zookeeper介绍 zookeeper是一个中间件,为分布式系统提供协调服务,可以为大数据服务,也可以为java服务. 分布式系统,很多计算机组成一个整体,作为一个整体一致对外并处理同一请求, ...

  9. 安装Linux系统Centos6版本

    1.下载VMware软件 2.下载Centos6文件 http://archive.kernel.org/centos-vault/6.8/isos/x86_64/CentOS-6.8-x86_64- ...

  10. 虚拟机vmware vmnet8 未识别（转）

    原文链接:https://blog.csdn.net/windows_q/article/details/50678646