(七)vue开发 - transition之弹窗动画_、不知不觉、的博客-程序员宝宝_vue动画

技术标签: vue  动画  

页面上需要弹出一个列表供用户选择,通过简单的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>通过css3的transition实现</p>
                <p>我是弹窗内容</p>
                <p>可以点击遮罩关闭我</p>
            </div>
        </div>

        <!-- 方法二:通过vue的transition配合css3动画实现  -->
        <div class="vue-popup">
            <div class="mask" v-show="show2" @click="showVuePopup(false)"></div>
            <transition name="slide">
                <div class="popup-content" v-show="show2">
                    <p>通过vue的transition配合css3动画实现</p>
                    <p>我是弹窗内容</p>
                    <p>可以点击遮罩关闭我</p>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Fixed',
    data() {
        return {
            show: false,
            show2: false
        }
    },
    methods: {
        showCssPopup(flag) {
            this.show = flag
        },
        showVuePopup(flag) {
            this.show2 = flag
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.xn-container {
    height: 100%;
}
button {
    display: block;
    width: 300px;
    height: 44px;
    margin: 20px auto;
    border-radius: 4px;
    background-color: #3884ff;
    color: #fff;
}
.css-popup {
    .popup-content {
        position: absolute;
        height: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        -webkit-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        &.show {
            height: 400px;
        }
        p {
            line-height: 30px;
            text-align: center;
        }
    }
}
.vue-popup {
    .popup-content {
        position: absolute;
        height: 400px;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        -webkit-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        p {
            line-height: 30px;
            text-align: center;
        }
    }
}
.mask {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease-in;
}

.slide-enter-active {
    animation-name: slideInUp;
    animation-duration: 0.2s;
    animation-fill-mode: both;
}
.slide-leave-active {
    animation-name: slideOutDown;
    animation-duration: 0.2s;
    animation-fill-mode: both;
}
@keyframes slideInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}
@keyframes slideOutDown {
    0% {
        transform: translateZ(0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
    }
}
.delay-leave-active {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
</style>

方法一说明:利用高度的变化实现动画效果

方法二说明:transition里面的动画内容一定要写在v-show或者v-if里面,否则动画没有效果

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010394015/article/details/79264017

智能推荐

mysql数据库学习_爱码~的博客-程序员宝宝

数据库的四大概念Data 数据 什么是数据?文本,图片,音频,视频。Database 数据库 就是存放数据的仓库。Database system CBSM 数据库系统 有MySQL Oracle。数据库管理员是DBAsql是关系型数据库的操作语言...

代码实现selector(StateListDrawable,ColorStateList)_github_29667873的博客-程序员宝宝

1.Drawable选择器(以RadioButton为例)xml:&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt;&amp;lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&amp;gt; &amp;lt;item android:drawable=&quot;@mipmap/hom.

视频流传输协议RTP/RTCP/RTSP/HTTP的区别_童话ing的博客-程序员宝宝

原文链接:https://blog.csdn.net/yangxt/article/details/7467457#commentBox相关学习连接:https://www.jianshu.com/p/80998a306431a用一n句简单'w的话总结:RTSP发起/终结流媒体、RTP传输流媒体数据 、RTCP对RTP进行控制,同步。之所以以前对这几个有点分不清,是因为CTC标准里没有对...

hibernate中的一个BUG_zaiyibo的博客-程序员宝宝

[b][color=red]CustomLoader.java——504行:[/color][/b][code=&quot;java&quot;] protected void autoDiscoverTypes(ResultSet rs) { try { Metadata metadata = new Metadata( getFactory(), rs ); List aliases...

uniapp页面参数传递_wwf1225的博客-程序员宝宝_uniapp参数

uniapp页面参数传递简介uniapp传递参数,和获取参数。首先 链接传递 或者事件传递1、要传递参数的页面 &lt;navigator:url="'./nav?index='+navData"&gt;点击传递参数&lt;/navigator&gt; 2、接收的页面 onLoad(option...

随便推点

The path "" is not a valid path to the 3.10.0-693.el7.x86_64 kernel headers_济源IT小伙一枚的博客-程序员宝宝

VMware安装VMware tool是 遇到The path “” is not a valid path to the 3.10.0-693.el7.x86_64 kernel headers.The path “” is not a valid path to the 3.10.0-693.el7.x86_64 kernel headers.问题是找不到内核头文件,需要安装头文件,按照网上...

HDU2255 奔小康赚大钱 又是984ms 飘过汗啊 最大权匹配 KM算法模版题_韦我独尊-德天独厚的博客-程序员宝宝

最近跟984ms很有爱啊,再次以984ms飘过!!!这道题不可以说是模版题目,因为它就是个模版,简直就是一模一样的模版,做了这道题你就知道什么是模版,模版长什么样子了,我反正照着模版打的,打出来跟模版长得一样题目是中文的  不用解释了先贴一个模版想要快点的 自己改成个邻接表形式的就可以了#include #include #define N 1001#de

编译原理阅读笔记_book2016的博客-程序员宝宝

1.用于我们常常要编写 命令行解释程序,编译器的工作原理有点类似于此,因此掌握编译原理很有意义2.基础:自动机原理3.汇编语言的编写依赖于特定的机器。所以需要编译程序,来分离物理设备,和编程语言。4.硬件-fortran编译器-fortran语言5.上下文无关文法【在机器翻译系统中P=“capital of China” 如何翻译?中国的首都(北京) 或 瓷都(景德镇)

c的源程序编译型语言,求C语言的小型编译程序的源代码_次元妹妹的博客-程序员宝宝

该楼层疑似违规已被系统折叠隐藏此楼查看此楼支持四则运算和指数运算(用h符)。数据类型为float型。算术式最大长度可以通过修改程序中的数组长度和“I”值更该,没有具体规定,使用时要注意运算结果的溢出问题。对错误的算术式有一定的检查功能。程序代码如下:#includefloatsss(floatd[],chare[],intI){inti,n;for(i=0;i&lt;=I;n=++i)...

附解决方案,小程序获取的用户信息中昵称图然变成了“微信用户”,而且头像也显示不了?_卡角的博客-程序员宝宝

以下解决方案来自51CTO博客作者编程小石头的原创作品最近好多小伙伴在使用getUserInfo获取小程序用户昵称和头像时,图然变成了下面这样。错误图示很多小伙伴肯定就疑虑了,明明我代码没有做任何改动啊,怎么突然就这样了呢。还记得我们之前应该长这样啊。微信又改规则了代码改动好在代码改动量不是很大,基本上改动5行代码就可以完事了。下面就来教大家如何改动代码吧。1,先来看看老代码js里的老代码可以看到我们用老代码,获取的就是下面这样灰色的头像和 微信用户 这样的昵称2,认识wx.

解决Vue中重复点击相同路由控制台报错问题[email protected]的博客-程序员宝宝

vue-router 升级到3.1.x 后,重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能视而不见。报错信息报错原因vue router ≥ v3.1后 ,回调形式改成promise api了,返回的是promise,如果没有捕获到错误,控制台始终会出现如上图的警告。解决方法【1】降低版本npm i [email protected] -S【2】在ro...

推荐文章

热门文章

相关标签