[Vue组件]弹窗添加异步关闭动画

于 2024-09-09 10:41:18 发布
阅读量1.1k 收藏 7
点赞数 9
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44175423/article/details/142052843
版权

前言

弹窗是日常开发中经常会用到的组件。一般做法是直接使用 v-model 传入 boolean 值绑定 v-show 指令切换组件dom元素 display 显示隐藏，如果不加入开启/关闭过渡动画，UI就会特别生硬。

过渡动画的实现方法有很多种，但由于元素渲染是由 v-show 指令直接控制的，所以在 v-show = false 时元素行内样式会被设为 display: none 脱离文档渲染，那么元素的一切样式都不会显示，所以编写弹窗关闭动画时需要些额外处理。

本文将以 CSS animation 举例，介绍实现异步关闭动画的思路，文章内代码演示地址。

CSS动画

简单介绍一下CSS动画实现弹窗开启动画，只要预先写好 @keyframes rtl 关键帧，再使用基本的 animation-name: rtl 和 animation-duration: 0.3s 两个属性就能实现最简单的弹窗开启（从右侧进入）动画。

@keyframes rtl {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(0%);
	}
}
.wrapper {
	animation-name: rtl;
	animation-duration: 0.3s;
	animation-fill-mode: both;
}

实现弹窗关闭动画的 CSS 也非常简单，只要重置一下 animation-name 属性，并使用 animation-direction: reverse 就能让动画直接倒放，不需要专门写关闭动画的 @keyframes。

基础思路有了，下面就开始用示例代码演示实现。

基本功能

这是一个最基础的弹窗组件代码。弹窗的显示状态读取 v-model 即 props.modelValue ，开启动画关键帧为 @keyframes rtl，定义在 Class .s-popup--wrapper.rtl 上：

<script lang="ts" setup>
import { computed } from 'vue';

defineOptions({
  name: 'Popup',
});

interface Props {
  modelValue: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false, // 自定义的 v-model 属性，双向绑定控制弹窗显示
});

const emit = defineEmits(['update:modelValue']); // 更新 v-model 值

// 弹窗内部 v-model 显示状态，被赋值时双向绑定更新父组件 v-model
const visible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  },
});
const handleClose = () => {
  visible.value = false;
};
</script>

<template>
  <div v-show="visible" class="s-popup rtl" v-bind="$attrs">
    <div class="s-popup--wrapper">
      <button class="btn-close" @click="handleClose">关闭</button>
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss">
@keyframes rtl {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0%);
  }
}

.s-popup {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  &--wrapper {
    display: grid;
    width: 100%;
    height: 100%;
    animation-name: rtl;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    background-color: var(--base-color-lighter);

    .btn-close {
      position: absolute;
      top: 4px;
      right: 4px;
      z-index: 1;
    }
  }

  &.rtl {
    height: 100%;
    top: 0;
    left: auto;
    right: 0;
    transform: translate(0%, 0%);

    .s-popup--wrapper {
      animation-name: rtl;
    }
  }
}
</style>

注意： 这里有个技巧，弹窗组件的定位样式是写在最外层的 .s-popup 上，而播放动画则是由其子元素 .s-popup--wrapper 负责，这种写法好处是，编写关键帧时不需要考虑元素本身的 transform 定位问题，让写好的关键帧少一些多余样式，能够适用到不同的组件里。

异步关闭

在文章一开头的时候已经说明过了，弹窗如果由 v-show 指令直接控制渲染状态的话，CSS动画是无法正常渲染的。

  1. 实现的第一步逻辑是，弹窗渲染状态不能直接绑定 v-model，我们需要一个内部变量独立控制弹窗组件显示状态，而 v-model 仅作为一个 watch 触发弹窗显示状态异步更新。
  2. watch 的过程中，弹窗开启动画是不受 display: none 影响的，所以还需要区分开启/关闭状态，定义一个 closed 状态以定义一个触发更新的时机。
  3. 弹窗关闭是在我们关闭过渡动画播放结束之后，那么我们异步更新显示状态的关键就是读取弹窗动画的播放状态。

具体实现代码如下：

<script lang="ts" setup>
import { computed } from 'vue';

defineOptions({
  name: 'Popup',
  inheritAttrs: false, // 禁用 Attributes 继承
});

interface Props {
  modelValue: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false, // 自定义的 v-model 属性，双向绑定控制弹窗显示
});

const emit = defineEmits(['update:modelValue']); // 更新 v-model 值

const closed = ref(false); // 弹窗关闭中
const animationPlaying = ref(false); // 过渡动画播放中

const shouldVisible = ref(props.modelValue); // 不确定的弹窗状态(判断动画过渡后才能确定显示状态)
// 弹窗内部 v-model 显示状态，被赋值时双向绑定更新父组件 v-model
const visible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  },
});

watch(visible, (val) => {
  changeShouldVisible(val);
});

// 异步切换自身显示状态
const changeShouldVisible = (val: boolean) => {
  // 弹窗显示时没有动画播放延迟，不能异步显示，否则打开弹窗时会有延迟
  if (val) {
    shouldVisible.value = val;
  } else {
    closed.value = true;
    const timer = setInterval(() => {
      if (animationPlaying.value) return; // 动画播放中时继续轮询
      closed.value = false;
      shouldVisible.value = val;
      clearInterval(timer); // 弹窗关闭，结束轮询
    }, 100);
  }
};
const handleClose = () => {
  visible.value = false;
};
const handleAnimationstart = () => {
  animationPlaying.value = true;
};
const handleAnimationend = () => {
  animationPlaying.value = false;
}
</script>

<template>
  <div v-show="shouldVisible" class="s-popup rtl" v-bind="$attrs">
    <div class="s-popup--wrapper" @animationstart.self="handleAnimationstart"
      @animationend.self="handleAnimationend">
      <button class="btn-close" @click="handleClose">关闭</button>
      <slot></slot>
    </div>
  </div>
</template>

首先我们可以通过 animationstart 和 animationend 事件读取 animationPlaying 播放中状态，在 v-model 触发弹窗关闭后，我们使用 changeShouldVisible 方法去控制弹窗显示，通过 setInterval 方法不断查询 animationPlaying 保证弹窗的 display: none 在动画完成后才被设置。

至此，我们已把 v-model 和弹窗开启/关闭分离开，只需要在关闭时为元素设置动画倒放，就能完成弹窗的关闭动画。

关闭动画

这里我们结合 Vue3 的特性，使用组合式函数来编写一个可复用的倒放样式。

由于动画是使用同一个 animation-name，所以在触发的那一刻我们需要先把 animation-name 清空，然后 setTimeout 一个 animation-irection: reverse 倒放属性，就能够让元素动画倒放，完成功能。

// useAnimationReverse.ts
import type { Ref } from 'vue';

import { ref, watch } from 'vue';

export function useAnimationReverse(on: Ref<boolean>) {
	const style = ref<{ [key: string]: any }>({});

	watch(on, (val) => {
		if (val) {
            // 先重设元素动画样式
			style.value = {
				animationDuration: 'auto',
				animationTimingFunction: 'ease',
				animationName: 'none',
			};
            // 随后设置倒放
			setTimeout(() => {
				style.value = {
					animationDirection: 'reverse',
				};
			}, 0);
		} else {
			style.value = {};
		}
	});

	return {
		style,
	};
}

最后引入到组件代码中。

最终代码

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { useAnimationReverse } from '@packages/composables';

defineOptions({
  name: 'Popup',
});

interface Props {
  modelValue: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emit = defineEmits(['update:modelValue']);

const closed = ref(false); // 弹窗关闭中
const animationPlaying = ref(false); // 过渡动画播放中

const shouldVisible = ref(props.modelValue); // 不确定的弹窗状态(判断动画过渡后才能确定显示状态)
const visible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  },
});

watch(visible, (val) => {
  changeShouldVisible(val);
});

const { style: animationStyle } = useAnimationReverse(closed);

const changeShouldVisible = (val: boolean) => {
  // 弹窗显示时没有动画播放延迟，不能异步显示，否则打开弹窗时会有延迟
  if (val) {
    shouldVisible.value = val;
  } else {
    closed.value = true;
    const timer = setInterval(() => {
      if (animationPlaying.value) return; // 动画播放中时继续轮询
      closed.value = false;
      shouldVisible.value = val;
      clearInterval(timer); // 弹窗关闭，结束轮询
    }, 100);
  }
};
const handleClose = () => {
  visible.value = false;
};
const handleAnimationstart = () => {
  animationPlaying.value = true;
};
const handleAnimationend = () => {
  animationPlaying.value = false;
}
</script>

<template>
  <div v-show="shouldVisible" class="s-popup rtl" v-bind="$attrs">
    <div class="s-popup--wrapper" :style="animationStyle" @animationstart.self="handleAnimationstart"
      @animationend.self="handleAnimationend">
      <button class="btn-close" @click="handleClose">关闭</button>
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss">
@keyframes rtl {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0%);
  }
}

.s-popup {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  &--wrapper {
    display: grid;
    width: 100%;
    height: 100%;
    animation-name: rtl;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    background-color: var(--base-color-lighter);

    .btn-close {
      position: absolute;
      top: 4px;
      right: 4px;
      z-index: 1;
    }
  }

  &.rtl {
    height: 100%;
    top: 0;
    left: auto;
    right: 0;
    transform: translate(0%, 0%);

    .s-popup--wrapper {
      animation-name: rtl;
    }
  }
}
</style>
Lesan2d
关注
vue点击子组件,父组件达到实时切换效果
weixin_64747231的博客
09-16 1369
vue点击子组件,父组件达到实时切换效果
vue中实现模态框弹出框动画（旋转弹出）
m0_70647221的博客
05-09 1104
<button @click=“togglebox”>点击弹出 <vodal :show=“show” animation=“rotate” @hide=“show = false”> A vue modal with animations. 效果 道具 (Props ) | Property | Type | Default | Description | | — | — | — | — | | width | number | 400 | width of dial.
vue点击弹窗外关闭弹窗
m0_61672533的博客
10-09 656
vue点击弹窗外关闭弹窗
前端设置dialog弹出框框关闭动画效果
sayoko06的博客
01-14 8650
项目前端使用element-ui框架，其提供的dialog弹出框没有过渡动画，比较单调，项目需要实现关闭弹出框时，弹出框逐渐缩小并移动到右上角消失。 只能自己手动修改css样式，这里用到了animation 和 transform属性； 贴代码： 其中.popout-box的class属性是通过befroe-close绑定上去的。模态框打开的时候没有，关闭前设置class，然后通过class...
vue2项目Vant组件Dialog 弹出框异步关闭的坑
前端开发小白9527
06-28 3784
vue2项目Vant组件Dialog 弹出框异步关闭的坑
vue-demo 给popup页面添加过渡动画效果
m13423的博客
05-01 1331
效果图 1. 首先创建两个文件夹 2. 在路由表中配置路由 import Vue from 'vue' import VueRouter from 'vue-router' import Homepage from '../views/Homepage.vue' //引入 Vue.use(VueRouter) const routes = [ { path: '/', redirect: "/homepage" }, { path...
uni_app 中怎么使得 u-modal 弹框点击确定时实现异步关闭（此例子可的场景有很多例如：当用户输错密码时，不能关闭弹框，而是让用户继续输入密码）
m0_73298638的博客
07-12 1037
uni_app u-modal 弹框 异步关闭
vue3弹窗组件库
最新发布
06-02
好的，我现在需要帮用户推荐适用于Vue3的弹窗组件库。首先，我得回顾一下用户提供的引用内容，虽然这些引用主要是关于Vue2和弹窗组件的实现方法，但用户现在明确需要Vue3的解决方案。因此，我需要从这些引用中提取...
vue3创建全局组件弹窗
02-19
嗯，用户想了解如何在Vue3中创建全局弹窗组件。首先，我需要回忆一下Vue3的全局组件注册方法。记得在Vue3中，是通过createApp方法创建的app实例来使用component方法注册全局组件的。所以步骤应该是先创建一个弹窗...
基于vue的消息提示队列组件
08-13
- **项目结构**：包括Vue组件源码（`.vue`文件）、样式表（`.css`或`.scss`）、可能的脚本文件（`.js`）、以及配置文件（如`package.json`）等。 - **组件实现**：Vue组件内部可能会有状态管理（如`data`、`...
Vuejs的简单轻便超快的全局通知弹窗
08-12
对于全局通知，我们会在install方法中添加一个全局方法，如`Vue.prototype.$notify`，这样在任何组件内部都可以方便地调用。 4. **组件样式设计** 为了实现轻便和快速，我们需要简洁而高效的CSS。可以使用CSS预...
vue实现一个展开和关闭的动画效果
浩星
06-17 3714
用 vue+animation 来实现一个展开与关闭的效果。
Vue3点击按钮展开表单且点击阴影部分和关闭按钮关闭
李长渊的博客
05-24 627
Vue3点击按钮展开表单且点击阴影部分和关闭按钮关闭
layer弹出层的关闭问题——在执行完毕后关闭当前弹出层
weixin_44195615的博客
08-19 1781
一、layer.close(index) - 关闭特定层 //当你想关闭当前页的某个层时 var index = layer.open(); var index = layer.alert(); var index = layer.load(); var index = layer.tips(); //正如你看到的，每一种弹层调用方式，都会返回一个index layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可 //如果你想关闭最新弹出的层，直
CSS 显示隐藏动画（动画失效问题）
前端精髓
03-02 2168
因此，你不能直接在 display: none; 和 display: block; 之间应用动画效果，因为这两个属性之间的切换是瞬间完成的，没有中间状态可以应用动画。
vue3 + computed 传参使用
weixin_43512977的博客
05-08 1433
默认是 get get 当 props.title 改变时触发 set 当 visible 被改变时触发 参数 visible 是当前值 const title = computed(() => props.title); const visible = computed({ get() { return props.dialogVisible; }, set(visible: boolean) { emit('update:dialogVis.
vue3 +ts (setup) 子组件接收并修改父组件的值
weixin_55042716的博客
11-14 2083
子组件接收父组件传过来的值，并修改该值。vue3中 使用setup。
vue实现点击弹出层动画效果
m0_59224033的博客
07-09 4909
vue最简单的实现上、下、左、右带动画/遮罩效果的弹出层，vue实现点击弹出层动画效果
vue开发 - transition之弹窗动画popup
知之为知之，不知为不知
10-16 3882
页面上需要弹出一个列表供用户选择，通过简单的v-show控制，感觉体验上总要差那么一点，于是加上了vue的transition，最终实现的效果就是，点击选择银行时，银行列表从下面一点点滑动上来，选择完成后，慢慢滑动 下去，贴上代码： 先看下效果： <template> <div class="xn-container"> <button class="type1" @click="showCssPopup(true)">css transiti
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值