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

呼吸动画一

淡入>>淡入>>淡入>>淡入>>淡入>>淡入

常用于展示某异步操作持续执行中

封装组件 breathing.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>

呼吸动画二

淡入>>淡出>>淡入>>淡出>>淡入>>淡出

常用于某状态正持续执行中

封装组件 breathing.vue

<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>