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

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

<template>
    <div id="app">
        <transition name="delay">
            <form class="form" v-show="!showBankList">
                <ul class="form-list">
                    <li class="border-bottom">
                        <label>信用卡后四位</label>
                        <input type="tel" placeholder="请填写信用卡号后四位" v-model.trim="formData.cardNumber" maxlength="4"/>
                    </li>
                    <li class="border-bottom icon-arrow">
                        <label>银行</label>
                        <input type="text" placeholder="选择银行" v-model.trim="formData.billName" readonly="readonly" @click="openBankList()"/>
                    </li>
                </ul>
                <div class="operate">
                    <button type="button" :class="['btn',!canSubmitBtn?'btn-disabled':'btn-submit']" :disabled="!canSubmitBtn" @click="submitForm();">确认提交</button>
                </div>
            </form>
        </transition>

        <transition name="slideup">
            <div class="bank-modal"  v-show="showBankList">
                <div class="search-bar">
                    <input type="text" v-model="bankSearch" placeholder="搜索银行/添加其他银行" @focus="searchFocus()"/>
                </div>
                <ul v-if="searchData.length > 0">
                    <li v-for="(item,index) in searchData" class="icon-arrow border-bottom" @click="selectBank(item.name,item.icon);">
                        <img :src="item.icon+'?x-oss-process=image/resize,w_56'"/>
                        <span>{{item.name}}</span>
                    </li>
                </ul>
                <div v-else class="empty">
                    <ul>
                        <li class="border-bottom"  @click="selectBank(bankSearch,defaultBankIcon);">
                            <img :src="defaultBankIcon"/>
                            <span>{{bankSearch}}</span>
                            <button type="button"><i class="icon-add"></i>添加</button>
                        </li>
                    </ul>
                    <p>未找到匹配的银行，您可以手动添加该银行</p>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import Network from '../assets/scripts/networks'
    import Rem from '../assets/scripts/rem'
    var d = new Date();
    export default {
        name: 'app',
        data () {
            return {
                windowHeight:document.documentElement.clientHeight,
                formData: {
                    cardNumber: '',
                    billName: '',
                    icon:'',
                    userId:'1'
                },
                showBankList:false,
                bankSearch:'',
                defaultBankIcon:'../images/img_moren.png',
                bankList:[]
            }
        },
        created(){
          this.getBankList();
        },
        mounted(){
            Rem.setFontSize()
        },
        methods: {
            getBankList(){
                Network.get('api/getBankList').then((res) => {
                    if('true' == res.result.success){
                        if(res.data.length){
                            this.bankList = res.data
                        }
                    }else{
                       alert(res.message)
                    }
                })
            },
            openBankList(){
                this.bankSearch = ''; this.showBankList = true;
            },
            selectBank(name,icon,uuid,msg){
                this.formData.billName = name, this.formData.icon = icon,this.showBankList = false;
            }
        },
        computed: {
            searchData: function() {
                var search = this.bankSearch;
                if (search) {
                    return this.bankList.filter(function(data) {
                        return Object.keys(data).some(function(key) {
                            return String(data[key]).toLowerCase().indexOf(search) > -1
                        })
                    })
                }
                return this.bankList;
            },
            canSubmitBtn:function(){
                this.formData.cardNumber = this.formData.cardNumber.replace(/[^\d]+/g,'')
                if( this.trim(this.formData.cardNumber) &&
                    this.trim(this.formData.billName) ){
                    return true;
                }else{
                    return false;
                }
            }
        }
    }
</script>

<style>
    @import "../assets/styles/common.css";
    .bank-modal{
        position: relative;
        width:100%;
        background-color: #f0f2f5;
        z-index:99;
    }
    .bank-modal .search-bar{
        position: fixed;
        padding:.35rem .6rem;
        background-color: white;
        top:0;
        left:0;
        right:0;
        z-index: 100;
        -webkit-overflow-scroll:touch }
    .bank-modal .search-bar:after{
        position: absolute;
        width:.65rem;
        height:.65rem;
        background: url(//images.51nbapi.com/images/20180112_credit_bill/ic_search.png) no-repeat;
        background-size: cover;
        content:'';
        left:.95rem;
        top:0;
        bottom:0;
        margin:auto;
    }
    .bank-modal .search-bar input{
        position: relative;
        height:1.5rem;
        border:0;
        background-color: #f2f4f6;
        font-size:.65rem;
        color: #666;
        text-indent: 1.25rem;
        display: block;
        width:100%;
        border-radius:.2rem;
        -webkit-user-select: text;
    }
    .bank-modal::-webkit-input-placeholder {
        color: #cecece;
    }
    .bank-modal ul{
        background-color: white;
        border-top: 1px solid rgba(0,0,0,.08);
        margin-top:2.2rem;
    }
    .bank-modal ul li{
        position: relative;
        display: flex;
        padding:.6rem 0;
    }
    .bank-modal ul li:active{
        background-color: #f5f5f5;
    }
    .bank-modal ul li img{
        width:1.4rem;
        height:1.4rem;
        margin-right:.5rem;
        margin-left:.85rem;
    }
    .bank-modal ul li span{
        display: block;
        flex:1;
        font-size: .7rem;
        line-height:1.4rem;
    }
    .bank-modal ul li button{
        display: block;
        width: 3.6rem;
        border: 1px solid rgba(56,132,255,.8);
        color: #3884ff;
        font-size: .7rem;
        height: 1.3rem;
        margin-right: .7rem;
        background: transparent;
        border-radius: .2rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .bank-modal .empty p{
        text-align: center;
        color: #999;
        font-size: .6rem;
        margin-top:.7rem;
    }
    .bank-modal .icon-add{
        position: relative;
        width:.6rem;
        height:.6rem;
        background: url(//images.51nbapi.com/images/20180112_credit_bill/ic_add.png) no-repeat;
        background-size: cover;
        display: inline-block;
        vertical-align: top;
        margin-top:.2rem;
        margin-right:.15rem;
    }
    .slideup-enter-active{
        animation-name: slideInUp;
        animation-duration: .2s;
        animation-fill-mode: both }
    .slideup-leave-active {
        animation-name: slideOutDown;
        animation-duration: .5s;
        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: .2s;
        -moz-animation-delay: .2s;
        -o-animation-delay: .2s;
        animation-delay: .2s;
    }
</style>

说明：transition里面的动画内容一定要写在v-show或者v-if里面，否则动画没有效果