vue中用组件封装过渡动画

àì夳堔傛蜴生んèń 2022-04-15 04:16 293阅读 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 条评论，293人围观）

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

相关阅读

相关 Vue过渡动画，组件动画，元素动画（vue2元素、组件过渡动画）

在 CSS 中，你需要定义以 name 属性值为前缀的六个类名来控制过渡的不同阶段。例如，如果 name="fade"，则需要定义以下类：.fade-enter-acti...

ゝ一纸荒年。/ 2024年04月22日 22:30/ 0 赞/ 39 阅读

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

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

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

相关 Vue之多元素组件过渡+动画封装

课程大纲（1）多元素过渡（2）多组件过渡（3）列表过渡（4）动画封装多元素过渡首先介绍下如何实现多元素过渡

灰太狼/ 2023年05月29日 05:13/ 0 赞/ 74 阅读

相关 vue过渡动画

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

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

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

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

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

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

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

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

相关 vue中组件的过渡动画

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

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

相关 vue中过渡和动画结合

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

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

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

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

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

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

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

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