vue中用组件封装过渡动画

最新推荐文章于 2024-04-05 21:53:19 发布

原创最新推荐文章于 2024-04-05 21:53:19 发布 · 546 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #封装过渡动画的组件

Vue 专栏收录该内容

58 篇文章

订阅专栏

本文介绍如何在Vue中封装自定义过渡动画，通过组件props接收显示状态，利用transition和slot结合实现父组件标签的接收，过渡效果通过JS钩子函数完成。示例展示了按钮控制动画显示隐藏，动画效果包括颜色变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件中要有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>