Vue - Vue中动画封装

川长思鸟来 2021-07-25 15:29 347阅读 0赞

### Vue中动画封装 ###

*  一 . css动画的封装
 *  二 . js动画的封装

# 一 . css动画的封装 #

1.  **动画封装模板组件 定义设置：**  
    （1）新建一个动画封装模板组件  
    （2）`transition` 标签中包裹一个 `slot` 标签，由外部传入内容  
    （3）由外部传入一个变量，判断dom是否显示，这里变量为 `show`  
    （4）`slot` 标签 `v-if` 判断
    
        <template>
          <div>
            <transition>
              <slot v-if="show"></slot>
            </transition>
          </div>
        </template>
        <script>
        export default {
          props: ["show"],
          data() {
            return {};
          },
        };
        </script>
        <style scoped>
        .v-enter,
        .v-leave-to {
          opacity: 0;
        }
        .v-enter-active,
        .v-leave-active {
          transition: opacity 1s;
        }
        </style>
2.  **使用动画的组件中**  
    （1）组件中引入 动画封装模板组件，这里动画组件为 `fade`  
    （2）动画封装模板组件包裹想要动画的内容
    
        <template>
          <div>
            <fade :show="show">
              <div>hello</div>
            </fade>
            <fade :show="show">
              <div>world</div>
            </fade>
            <button @click="handleClick">切换显隐</button>
          </div>
        </template>
        
        <script>
        //动画封装模板组件：组件地址仅供参考
        import fade from "../layout/transition.vue";
        export default {
          components: {
            fade,
          },
          data() {
            return {
              show: true,
            };
          },
          methods: {
            handleClick() {
              this.show = !this.show;
            },
          },
        };
        </script>
        <style scoped>
        </style>

# 二 . js动画的封装 #

1.  **动画封装模板组件 定义设置：**  
    （1）新建一个动画封装模板组件  
    （2）`transition` 标签中包裹一个 `slot` 标签，由外部传入内容  
    （3）由外部传入一个变量，判断dom是否显示，这里变量为 `show`  
    （4）`slot` 标签 `v-if` 判断
    
        <template>
          <div>
            <transition
              @before-enter="handleBeforeEnter"
              @enter="handleEnter"
              @after-enter="handleAfterEnter"
            >
              <slot v-if="show"></slot>
            </transition>
          </div>
        </template>
        <script>
        export default {
          props: ["show"],
          methods: {
            handleBeforeEnter(el) {
              el.style.color = "red";
            },
            handleEnter(el, done) {
              setTimeout(() => {
                el.style.color = "blue";
                done();
              }, 1000);
            },
            handleAfterEnter(el) {
              setTimeout(() => {
                el.style.color = "#000";
              }, 2000);
            },
          },
        };
        </script>
        <style scoped>
        </style>
2.  **使用动画的组件中**  
    （1）组件中引入 动画封装模板组件，这里动画组件为 `fade`  
    （2）动画封装模板组件包裹想要动画的内容
    
        <template>
          <div>
            
            <fade :show="show">
              <div>hello</div>
            </fade>
            <fade :show="show">
              <div>world</div>
            </fade>
            <button @click="handleClick">切换显隐</button>
          </div>
        </template>
        
        <script>
        //动画封装模板组件：组件地址仅供参考
        import fade from "../layout/transition.vue";
        export default {
          components: {
            fade,
          },
          data() {
            return {
              show: true,
            };
          },
          methods: {
            handleClick() {
              this.show = !this.show;
            },
          },
        };
        </script>
        <style scoped>
        </style>