vue 组件封装 -- 添加【呼吸】动画效果（两种： 淡入＞＞淡入，淡入＞＞淡出＞＞淡入）

<template>
  <div :style="{ opacity }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    interval: {
      type: Number,
      default: 20,
    },
  },
  data() {
    return {
      opacity: 0,
    };
  },
  mounted() {
    this.breath();
  },
  methods: {
    breath() {
      let that = this;
      setInterval(() => {
        that.opacity += 0.01;
        if (that.opacity >= 1) that.opacity = 0;
      }, that.interval);
    },
  },
};
</script>

<template>
  <div :style="{ opacity }">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    props: {
      interval: {
        type: Number,
        default: 20,
      },
    },
    data() {
      return {
        opacity: 0,
        change_opacity: 0.01
      };
    },
    mounted() {
      this.breath();
    },
    methods: {
      breath() {
        let that = this;
        setInterval(() => {
          that.opacity += that.change_opacity;
          if (that.opacity >= 1) {
            that.change_opacity = -0.01
          }
          if (that.opacity <= 0) {
            that.change_opacity = 0.01
          }
        }, that.interval);
      },
    },
  };
</script>

<template>
  <div class="page">
    <Breathing>正在执行</Breathing>
  </div>
</template>

<script>
import Breathing from "./breathing.vue";
export default {
  components: {
    Breathing,
  },
};
</script>

<style scoped>
.page {
  padding: 30px;
}
</style>