vue中用组件封装过渡动画

àì夳堔傛蜴生んèń 2022-04-15 04:16 322阅读 0赞

组件中要有props接收一个值，比如：show；组件的template中transition和slot的结合，可以接收父组件中的标签；过渡效果通过js钩子函数实现。这样就可以实现自己封装过渡动画，在项目中复用。

<body>
      <div id="demo">
        <button @click="show = !show">add item</button>
        <fade :show="show">
          <h4>hello world</h4>
        </fade>
      </div>
      <script type="application/javascript">
        Vue.component('fade', {
          props: ['show'],
          template: `<transition @before-enter="handleBeforeEnter"
                                 @enter="handleEnter"
                                 @after-enter="handleAfterEnter">
          <slot v-if="show"></slot>
        </transition>`,
        methods: {
          handleBeforeEnter(dom){
            dom.style.color = 'red'
          },
          handleEnter (dom, done) {
            setTimeout(() => {
              dom.style.color = 'green'
            }, 2000);
            setTimeout(() => {
              done()
            }, 3000);
          },
          handleAfterEnter (dom) {
            console.log('finish encapsulation')
          }
        }
        })
        new Vue({
          el: '#demo',
          data: {
            show: true
          },
        })
      </script>
    </body>

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue 过渡 & 动画

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

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

相关学习VUE第十四天课程（VUE之多元素组件过渡+动画封装）

学习VUE第十三天课程（VUE之多元素组件过渡+动画封装）（1）多元素过渡（2）多组件过渡（3）列表过渡（4）动画封装多元素过渡首先介绍下

ゝ一世哀愁。/ 2023年05月29日 05:22/ 0 赞/ 160 阅读

相关 vue过渡动画

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

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

相关 Vue封装回到顶部公共组件(动画过渡)-案例

演示 ![20210805181920513.gif][] > Top.vue <template> <div class="goTop" v-s

梦里梦外;/ 2022年09月03日 05:15/ 0 赞/ 213 阅读

相关 vue中用组件封装过渡动画

组件中要有props接收一个值，比如：show；组件的template中transition和slot的结合，可以接收父组件中的标签；过渡效果通过js钩子函数实现。这样就可以实

àì夳堔傛蜴生んèń/ 2022年04月15日 04:16/ 0 赞/ 323 阅读

相关 vue中组件的过渡动画

1. 和多个元素的过渡一样，用组件来替换transition中包裹的标签 <style> .fade-enter, .fade-le

灰太狼/ 2022年04月15日 03:56/ 0 赞/ 304 阅读

相关 vue中过渡和动画结合

动画、过渡、页面加载时就有动画 <style> .de{ width: 100px; height: 100p

深碍√TFBOYSˉ_/ 2022年04月15日 02:59/ 0 赞/ 229 阅读

相关 Vue学习笔记5.7 封装过渡动画

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

た入场券/ 2022年03月20日 13:58/ 0 赞/ 281 阅读

相关 Vue中使用 transition动画，vue过渡动画

[Vue][]的动画并没有非常炫酷的效果，不过也是有一些实用性的，在项目中有的地方使用，也是能够营造出不同的效果下面为大家列举两个简单实现动画的例子，动画其实很简单，就是利

小鱼儿/ 2022年03月11日 08:08/ 0 赞/ 906 阅读

相关 Vue - Vue中动画封装

Vue中动画封装一 . css动画的封装二 . js动画的封装一 . css动画的封装 1. 动画封装模板组件定义设置：（1）

川长思鸟来/ 2021年07月25日 15:29/ 0 赞/ 420 阅读