<style>
  .v-enter,.v-leave-to{
    opacity: 0;
  }
  .v-enter-active,.v-leave-active{
    transition:opacity 1s;
  }
</style> <div id='app'>
  <transition>
    <div v-if='show'>hello world</div>
  </transition>
  <button @click='handleClick'>切换</button>
</div> <script>
var vm = new Vue({
  el:'#app',
  data:{
    show:true
  },
  methods:{
    handleClick:function(){
      this.show = !this.show;
    }
  }
})
</script>
有时候这种渐隐渐现的效果用的比较多,要复用,需要封装一下,怎么封装呢
<style>
  .v-enter,.v-leave-to{
    opacity: 0;
  }
  .v-enter-active,.v-leave-active{
    transition:opacity 1s;
  }
</style> <div id='app'>
  <fade :show='show'>
    <div>hello world</div>
  </fade>
  <fade :show='show'>
    <h1>hello world</h1>
  </fade>
  <button @click='handleClick'>切换</button>
</div> <script>
Vue.component('fade',{
  props:['show'],
  template: `
    <transition>
      <slot v-if='show'></slot>
    </transition>
  `
})
var vm = new Vue({
  el:'#app',
  data:{
    show:false
  },
  methods:{
    handleClick:function(){
      this.show = !this.show;
    }
  }
})
</script>
可以这样封装,将dom元素传入slot,除了这样,还可以样式一起封装进去
<div id='app'>
  <fade :show='show'>
    <div>hello world</div>
  </fade>
  <fade :show='show'>
    <h1>hello world</h1>
  </fade>
  <button @click='handleClick'>切换</button>
</div> <script>
Vue.component('fade',{
  props:['show'],
  template: `
    <transition @before-enter='handleBeforeEnter' @enter='handleEnter'>
      <slot v-if='show'></slot>
    </transition>
  `,
  methods:{
    handleBeforeEnter:function(el){
      el.style.color='red'
    },
    handleEnter:function(el,done){
      setTimeout(()=>{
        el.style.color='green';
        done();
      },2000)
    }
  }
})
var vm = new Vue({
  el:'#app',
  data:{
    show:false
  },
  methods:{
    handleClick:function(){
      this.show = !this.show;
    }
  }
})
</script>
把样式一起封装进来,是比较推荐的方式

vue中动画的封装的更多相关文章

  1. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  2. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  3. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  4. vue中axios的封装以及简单使用

    一.axios的封装 在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装: 1.新建http.js模块 import axios from 'axios' // 设置基 ...

  5. vue中动画的使用

    不要在router-view的外层使用动画!不要在router-view的外层使用动画!不要在router-view的外层使用动画! 重要的事情说三遍,在app.vue中自以为奇思妙想(实际是脑残)在 ...

  6. vue中axios的封装

    第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...

  7. vue 中动画配置

    <transition name="fade">   <router-view ></router-view> </transition& ...

  8. vue中的axios封装

    import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000;axios ...

  9. vue中利用Promise封装jsonp并调取数据

    Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功).Rejected(失败 ...

随机推荐

  1. my26_Slave failed to initialize relay log info structure from the repository

    重启了一下从库,忘记先stop slave ,直接mysqladmin shutdown关闭实例,结果起不来了 mysql> start slave;ERROR 1872 (HY000): Sl ...

  2. python 数据可视化---Anscombe’s quartet

    import seaborn as sns sns.set(style="ticks") # Load the example dataset for Anscombe's qua ...

  3. battery-historian结果分析

    准备电量数据: 1. 断开adb服务 执行:adb kill-server 2. 开启adb服务 执行:adb start-server或者adb devices这两步操作的作用:adb作为一种连接的 ...

  4. oracle_expdp_help

    [oracle@ctp ~]$ expdp -help Export: Release 11.2.0.3.0 - Production on Thu Feb 28 13:52:15 2019 Copy ...

  5. `aclocal-1.10' is missing on your system

    root@ubuntu31:~/linux-ftools-master# makecd . && /bin/bash /root/linux-ftools-master/missing ...

  6. Tomcat安装和配置过程

    tomcat的下载.配置.启动方法.网上教程乱七八糟,还是自己mark一下备用吧. 一.官网下载Tomcat的压缩包 Tomcat是Apache软件基金会的一个开源项目.登录Apache官网即可找到下 ...

  7. Andrew Ng 的 Machine Learning 课程学习 (week4) Multi-class Classification and Neural Networks

    这学期一直在跟进 Coursera上的 Machina Learning 公开课, 老师Andrew Ng是coursera的创始人之一,Machine Learning方面的大牛.这门课程对想要了解 ...

  8. Python四大神兽(迭代器&生成器&闭包&装饰器)

    一.迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式.. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不 ...

  9. Vue.js基础语法(一)

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 前言: 前端解析数 ...

  10. hdu 3530 区间和在一定范围内最长区间

    http://acm.hust.edu.cn/vjudge/problem/11253 这题要找到区间和在[m,k]范围内的最长区间 用两个单调序列保存区间最大值和最小值.当最大值-最小值>k时 ...