（七）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里面，否则动画没有效果