<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. 隐藏win10中“此电脑”里的6个子文件夹

    删除点击此电脑后6个子文件夹 运行regedit: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Fold ...

  2. windows 远程到ubuntu桌面

    Windows remote connect ubuntu desktop 1. install xRDP sudo apt-get update sudo apt-get install xrdp ...

  3. Microsoft使用技巧

    1.拍摄屏幕内容的截图 按 Win + Shift + S 以打开截图栏,然后将光标拖动到要捕获的区域. 截图区域将保存到剪贴板. 2.使用键盘添加表情符号 随心随处表达自我. 按 Ctrl + Sh ...

  4. VBS 学习

    VBS其他功能 获取系统用户名 DimWshNetwork Set WshNetwork =CreateObject("WScript.Network") strTaccount ...

  5. Redis Intro - Skiplist

    http://zhangtielei.com/posts/blog-redis-skiplist.html https://juejin.im/entry/59197a390ce4630069fbcf ...

  6. ubuntu14.04通过 gvm 安装 go语言开发环境

    最近用回了ubuntu ,所以打算安装golang学习当下比较火热的这个语言 本来打算使用 sudo apt-get install golang的 安装后发现 是1.2.1不是最新版 所以上网上搜了 ...

  7. 连接虚机中的mysql服务

    1:修改mysql库中的user表的root用户的host值为% 2:授权:在mysql命令中执行 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFI ...

  8. IE浏览器兼容性问题解决方案

    一.CSS常见问题 1.H5标签兼容性 解决方案:<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.j ...

  9. VMWare 9 安装 win8

    http://tieba.baidu.com/p/1954912175 http://down.51cto.com/data/497803 win8专业版:NBCCB-JJJDX-PKBKJ-KQX8 ...

  10. BZOJ1563: [NOI2009]诗人小G(决策单调性 前缀和 dp)

    题意 题目链接 Sol 很显然的一个dp方程 \(f_i = min(f_j + (sum_i - sum_j - 1 - L)^P)\) 其中\(sum_i = \sum_{j = 1}^i len ...