第二篇章：transition 的封装组件--entering/leaving 过渡

过渡的-CSS-类名

会有 6 个(CSS)类名在 enter/leave 的过渡中切换

1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

2. v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。

4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

5. v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave 被删除），在 transition/animation 完成之后移除。

例子有

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

js代码为：

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

css代码为：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

 

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

 

transition 单元素/组件的过渡   http://cn.vuejs.org/v2/guide/transitions.html

 方式一：

从下到上滑动弹窗

<transition name="fade">
<div class="widgets-cover" v-show="foldshow">
     <div class="cover-bg" aria-label="关闭弹层"></div>
     <div class="cover-content">
          <div class="sku-wrap">
                  我的世界上唯一性的
          </div>
     </div>
</div>
</transition>

.widgets-cover{ position: fixed; top: 0; left: 0; right: 0; bottom:0; z-index: 9999;pointer-events:auto; opacity:1;}
.widgets-cover.fade-enter-active, .widgets-cover.fade-leave-active {transition:opacity 0.3s 80ms ;opacity:1;pointer-events:none}
.widgets-cover.fade-enter, .widgets-cover.fade-leave-to { opacity:0;}
.widgets-cover .cover-bg{ position: fixed; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0,0,0,0.5);}
.widgets-cover .cover-content{ position: fixed; left: 0; right: 0; bottom: 0; top: 20%; background-color:#fff;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); z-index: 9999;}
.widgets-cover.fade-enter-active .cover-content,.widgets-cover.fade-leave-active .cover-content{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform .3s cubic-bezier(0,0,.25,1) 80ms;transition:transform .3s cubic-bezier(0,0,.25,1) 80ms;}
.widgets-cover.fade-enter .cover-content,.widgets-cover.fade-leave-to .cover-content{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);}

本地效果为：http://wap.oshop.usport.cc/mobile/#/goods/180

方式二：由没有(transform:scale(0.5))到有(transform:scale(1))的效果 

<transition name="fade">
     <div class="flashfixed" v-show="flashshow">
          <div class="flash_cover_bg"></div>
          <div class="flash_cover_content">
               <div class="flash_cover_wrap">
               <div class="flashUl">
                    <a href="">看算</a>
                    <a href="">听算</a>
                    <a href="">练功房</a>
               </div>
               <a class="sku-close" href="javascript:void(0);" aria-label="关闭" @click="deleteClick"><i class="icon-circle"></i></a>
               </div>
          </div>
     </div>
     </transition>

.flashfixed{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;opacity:1}
.flashfixed.fade-enter-active, .flashfixed.fade-leave-active {transition:opacity 0.3s 80ms ;opacity:1;pointer-events:none}
.flashfixed.fade-enter, .flashfixed.fade-leave-to { opacity:0;}
.flashfixed .flash_cover_bg{ position: fixed; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0,0,0,0.4)}
.flash_cover_content{ position: fixed; left: 50%; top: 0; bottom: 0; top: 50%; width: 360px; height: 400px; margin-left: -180px; margin-top: -200px; background:#fff; -webkit-transform:scale(1);transform:scale(1);}
.flashfixed.fade-enter-active .flash_cover_content,.flashfixed.fade-leave-active .flash_cover_content{-webkit-transform:scale(1);transform:scale(1); -webkit-transition:-webkit-transform .3s cubic-bezier(0,0,.25,1) 80ms;transition:transform .3s cubic-bezier(0,0,.25,1) 80ms;}
.flashfixed.fade-enter .flash_cover_content,.flashfixed.fade-leave-to .flash_cover_content{-webkit-transform:scale(0.5);transform:scale(0.5);}
.flash_cover_wrap{ position: absolute; left: 0; right: 0; top: 0; bottom: 0}

或者css样式也是可以这样写

.flashfixed{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99;opacity:1}

.flashfixed.fade-enter{opacity:0;}
.flashfixed.fade-enter.fade-enter-active{transition:opacity 0.3s 80ms ;opacity:1;pointer-events:none}
.flashfixed.fade-leave{opacity:1;}
.flashfixed.fade-leave.fade-leave-active{transition:opacity 0.3s 80ms ;opacity:0;}

.flash_cover_content{ position: fixed; left: 50%; top: 0; bottom: 0; top: 50%; width: 476px; height: 476px; margin-left: -238px; margin-top: -238px; background:#ffe30d; border-radius:50px; -webkit-transform:scale(1);transform:scale(1);}

.flashfixed.fade-enter .flash_cover_content{-webkit-transform:scale(0.5);transform:scale(0.5);}
.flashfixed.fade-enter.fade-enter-active .flash_cover_content{-webkit-transform:scale(1);transform:scale(1); -webkit-transition:-webkit-transform .3s cubic-bezier(0,0,.25,1) 80ms;transition:transform .3s cubic-bezier(0,0,.25,1) 80ms;}
.flashfixed.fade-leave .flash_cover_content{-webkit-transform:scale(1);transform:scale(1);}
.flashfixed.fade-leave.fade-leave-active .flash_cover_content{-webkit-transform:scale(0.5);transform:scale(0.5); -webkit-transition:-webkit-transform .3s cubic-bezier(0,0,.25,1) 80ms;transition:transform .3s cubic-bezier(0,0,.25,1) 80ms;}

本地效果为：珠心算首页

方式三：选择省市区联动效果

 

 html代码为：

<!--省市区 S-->
        <transition name="fade">
            <div class="widgets-cover" :class="{'isNativeCover':isNativeApp}" v-show="areaSelectedShow">
             <div class="cover-bg" aria-label="关闭弹层" @click="fadeHideFunc"></div>
             <!--是否续贷 S-->
             <div class="cover-contentLoan" v-if="filterTabNum === 'loan'">
                <div class="mdloanselect">
                    <ul class="cityselect-content">
                        <li class="cityselect-item">
                            <div class="cityselect-item-box">
                                <a href="javascript:;" v-for="(item, index) in loanOptionAll" @click="loanFunc(item.key,$event)" :class="{'hover': loanTypeNum === item.key}"><span>{{item.value}}</span></a>
                           </div>
                        </li>
                    </ul>
                </div>
             </div>
             <!--是否续贷 E-->
             <!--选择省市区 S-->
             <div class="cover-content" v-if="filterTabNum === 'province'">
                  <div class="mdcityselect">
                       <div class="cityselect-header">
                           <div class="cityselect-nav">
                               <a href="javascript:;" @click="selectedTabFunc(1,$event)" :class="{'hover': areaSelected.classTabNum === 1}">{{areaSelected.proviceName}}</a>
                               <a href="javascript:;" @click="selectedTabFunc(2,$event)" :class="{'hover': areaSelected.classTabNum === 2}">{{areaSelected.cityName}}</a>
                               <a href="javascript:;" @click="selectedTabFunc(3,$event)" :class="{'hover': areaSelected.classTabNum === 3}">{{areaSelected.countyName}}</a>
                           </div>
                       </div>
                       <ul class="cityselect-content" :class="areaSelected.classHover">
                          <li class="cityselect-item">
                              <div class="cityselect-item-box">
                                   <a href="javascript:;" v-for="(itemprovince, index) in areaOptionsAll" @click="provinceFunc(itemprovince.k,itemprovince,$event)" :class="{'hover': areaSelected.proviceTypeNum === itemprovince.k}"><span>{{itemprovince.v}}</span></a>
                              </div>
                          </li>
                          <li class="cityselect-item">
                              <div class="cityselect-item-box">
                                  <a href="javascript:;" v-for="(itemCity, index) in areaOptionCity" @click="cityFunc(itemCity.k,itemCity,$event)" :class="{'hover': areaSelected.cityTypeNum === itemCity.k}"><span>{{itemCity.v}}</span></a>
                             </div>
                          </li>
                          <li class="cityselect-item">
                              <div class="cityselect-item-box">
                                  <a href="javascript:;" v-for="(itemCountry, index) in areaOptionCountry" @click="countryFunc(itemCountry.k,itemCountry,$event)" :class="{'hover': areaSelected.countryTypeNum === itemCountry.k}"><span>{{itemCountry.v}}</span></a>
                             </div>
                          </li>
                       </ul>
                  </div>
             </div>
             <!--选择省市区 E-->
             <!--是否项目阶段 S-->
             <div class="cover-contentLoan" v-if="filterTabNum === 'projectstage'">
                <div class="mdloanselect">
                    <ul class="cityselect-content">
                        <li class="cityselect-item">
                            <div class="cityselect-item-box">
                                <a href="javascript:;" v-for="(item, index) in projectOptionAll" @click="projectFunc(item.key,$event)" :class="{'hover': projectTypeNum === item.key}"><span>{{item.value}}</span></a>
                           </div>
                        </li>
                    </ul>
                </div>
             </div>
             <!--是否项目阶段 E-->
        </div>
        </transition>
        <!--省市区 E-->

css代码为：

.widgets-cover{ position:fixed; left: 0; right: 0; top:7.05rem; bottom:0; z-index: 9999;pointer-events:auto; opacity:1;}
.widgets-cover.isNativeCover{ top:4.8rem;}
.widgets-cover.fade-enter-active, .widgets-cover.fade-leave-active {transition:opacity 0.3s 80ms ;opacity:1;pointer-events:none}
.widgets-cover.fade-enter, .widgets-cover.fade-leave-to { opacity:0;}
.widgets-cover .cover-bg{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0,0,0,0.5);}
.widgets-cover .cover-content{ position: absolute; left: 0; right: 0; bottom: 20%; top: 0; border-top:0.05rem solid #f7f7f8; background-color:#fff;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); z-index: 9999;}
.widgets-cover .cover-contentLoan{ position: absolute; left: 0; right:0; top: 0; background: #fff; border-top:0.05rem solid #f7f7f8; z-index: 9999;}
.mdcityselect{ width:100%; height:90%;}
.cityselect-nav{ width:100%; padding-left:.5rem; overflow: hidden; display: flex; border-bottom: 1px solid #F0F1F3;}
.cityselect-nav a{font-size: .65rem;color:#222; display: block; height:36px; line-height: 36px; padding:0 .2rem; position: relative; margin-right:.15rem;white-space: nowrap;overflow: hidden; text-overflow:ellipsis; max-width:40%; border-bottom:1px solid #fff;}
.cityselect-nav a.hover{color: #54B175; border-bottom:1px solid #54B175;}
.cityselect-content{ height:100%; width:100%;display: flex;}
.cityselect-content.cityselect-move-animate { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; }
.cityselect-content.cityselect-next { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
.cityselect-content.cityselect-next-next { -webkit-transform: translate(-200%, 0); transform: translate(-200%, 0); }
.cityselect-content.cityselect-prev { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.cityselect-content .cityselect-item{display:block; height: inherit; width:100%; overflow-y:auto; background:#fff; flex:0 0 100%;}
.cityselect-item-box{ width: 100%; height: inherit; display: block; padding: 0 .7rem;}
.cityselect-item-box a{ color: #333; font-size: .65rem; height: 37px; line-height: 37px; overflow: hidden;display: flex;align-items:center; width: 100%; position: relative; z-index: 1;}
.cityselect-item-box a.hover{ color: #54B175;}
.cityselect-item-box a:before{content: '';position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 1px; transform:scaleY(0.5);transform-origin:0 100%;}
.cityselect-item-box a.hover:after{display: block;content: '';background: url('../../assets/images/icon-selected.png') no-repeat center; width:1.65rem; height: 1.2rem; background-size: 40% 40%; position: absolute; right: 0;}
.cityselect-content > .cityselect-item::-webkit-scrollbar {width: 0;}

本地代码效果为：E:\www\svn\vue\vue-module\src\pages\supportPoor\poorProjectList.vue