（七）vue开发 - transition之弹窗动画

最新推荐文章于 2024-08-07 21:53:27 发布

、不知不觉、

最新推荐文章于 2024-08-07 21:53:27 发布

阅读量1.2w

点赞数 5

分类专栏： vue 动画

本文链接：https://blog.csdn.net/u010394015/article/details/79264017

版权

页面上需要弹出一个列表供用户选择，通过简单的v-show控制，感觉体验上总要差那么一点，于是加上了vue的transition，最终实现的效果就是，点击选择银行时，银行列表从下面一点点滑动上来，选择完成后，慢慢滑动下去，贴上代码：
先看下效果：
在这里插入图片描述

<template>
    <div class="xn-container">
        <button class="type1" @click="showCssPopup(true)">css transition</button>
        <button class="type1" @click="showVuePopup(true)">vue transition</button>

        <!-- 方法一：通过css3的transition实现  -->
        <div class="css-popup">
            <div class="mask" v-show="show" @click="showCssPopup(false)"></div>
            <div class="popup-content" :class="{show}">
                <p>通过c