Vue可复用的过渡

拼搏现实的明天。 2024-04-17 05:35 69阅读 0赞

# 可复用的过渡 #

过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将 `<transition>` 或者 `<transition-group>` 作为根组件，然后将任何子组件放置在其中就可以了。  
使用 `template` 的简单例子：

Vue.component('my-special-transition', { 
      template: '\ <transition\ name="very-special-transition"\ mode="out-in"\ v-on:before-enter="beforeEnter"\ v-on:after-enter="afterEnter"\ >\ <slot></slot>\ </transition>\ ',
      methods: { 
        beforeEnter: function (el) { 
          // ...
        },
        afterEnter: function (el) { 
          // ...
        }
      }
    })

函数式组件更适合完成这个任务：

Vue.component('my-special-transition', { 
      functional: true,
      render: function (createElement, context) { 
        var data = { 
          props: { 
            name: 'very-special-transition',
            mode: 'out-in'
          },
          on: { 
            beforeEnter: function (el) { 
              // ...
            },
            afterEnter: function (el) { 
              // ...
            }
          }
        }
        return createElement('transition', data, context.children)
      }
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，69人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue状态过渡

状态过渡 * 概述 * 状态动画与侦听器 * 把过渡放到组件里 * 赋予设计以生命概述 Vue 的过渡系统提供了非常多简单的方法设置进入...

柔光的暖阳◎/ 2024年04月17日 05:38/ 0 赞/ 76 阅读

相关 Vue可复用的过渡

可复用的过渡过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将 `<transition>` 或者 `<transition-...

拼搏现实的明天。/ 2024年04月17日 05:35/ 0 赞/ 70 阅读

相关 Vue列表过渡

列表过渡 * 前言 * 列表的进入/离开过渡 * 列表的排序过渡 * 列表的交错过渡前言目前为止，关于过渡我们已经讲到： * 单个节...

忘是亡心i/ 2024年04月17日 05:35/ 0 赞/ 80 阅读

相关 Vue可复用解决方案

目录一. 自定义指令 1.1.全局指令 1.2.局部指令 1.3.指令参数二. Mixin混入 2.1.基本用法 2.2. 混入优先级 2.3.全局 Mix

淡淡的烟草味﹌/ 2024年04月06日 12:06/ 0 赞/ 94 阅读

相关 Vue 过渡 & 动画

概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class 可以配合使用

Love The Way You Lie/ 2023年07月01日 12:53/ 0 赞/ 51 阅读

相关 vue过渡动画

vue 过渡动画可以分为两部分 1.vue内置类名：匿名动画，具名动画内置类名：进入进入前动画名-enter

￡神魔★判官ぃ/ 2022年11月29日 12:23/ 0 赞/ 298 阅读

相关打造 Vue.js 可复用组件

> Vue.js 是一套构建用户界面的渐进式框架。我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件。从维护视图到维护数据，Vue.js 让我们快速地开发应

深碍√TFBOYSˉ_/ 2022年09月30日 07:16/ 0 赞/ 205 阅读

相关 Vue_列表过渡

如果是列表的话，想要做动画，让列表在包裹在transition-group里面 <transition-group name='listcss'> <div v-fo

刺骨的言语ヽ痛彻心扉/ 2022年05月20日 23:29/ 0 赞/ 276 阅读

相关 VUE过渡（一)单元素过渡

VUE过渡（一)单元素过渡转载[https://cn.vuejs.org/v2/guide/transitions.html][https_cn.vuejs.org_v

叁歲伎倆/ 2022年01月29日 13:19/ 0 赞/ 296 阅读

相关 vue 过渡的坑

说一下自己使用vue过渡时爬的坑第一 <transition v-for=" " key=" " @before-enter="beforeEnter" @enter="

向右看齐/ 2021年12月23日 00:41/ 0 赞/ 268 阅读