vue中用组件封装过渡动画

最新推荐文章于 2022-11-06 23:13:02 发布

叨唠

最新推荐文章于 2022-11-06 23:13:02 发布

阅读量496

点赞数

分类专栏： Vue 文章标签： vue 封装过渡动画的组件

本文链接：https://blog.csdn.net/zyz00000000/article/details/84319914

版权

Vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

组件中要有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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中用组件封装过渡动画

组件中要有props接收一个值，比如：show；组件的template中transition和slot的结合，可以接收父组件中的标签；过渡效果通过js钩子函数实现。这样就可以实现自己封装过渡动画，在项目中复用。&lt;body&gt; &lt;div id="demo"&gt; &lt;button @click="show = !show"&gt;add item&lt;/bu...
复制链接

扫一扫

专栏目录