vue從建立到完整的餓了麼（15）組件動畫

說明

1.上一章--shop.vue
2.蒼渡大神源碼--項目地址
3.數據接口--API接口地址
4.UI框架--Mint UI
5.下一章--watch監聽子路由變化

開始

1.我們的商品與評價顯示隱藏時沒有任何過渡動畫，我們如今加一個

2.判斷動畫怎麼寫

因此我們須要寫兩個動畫，一個左進左出，一個右進右出

3.寫動畫
style文件夾下的mycss中寫（這是個人全局css）
先寫左進左出的動畫，名字爲設left

/* 組件動畫 */
.left-enter-active{
  animation-name: left-in;
  animation-duration: .2s; 
  animation-timing-function:linear;
}
.left-leave-active{
  animation-name: left-out;
  animation-timing-function:linear;
  animation-duration: .2s; 
}
@keyframes left-in {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  50% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes left-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

右進右出的動畫，名字爲設right

.right-enter-active{
   animation-name: right-in;
  animation-duration: .2s; 
  animation-timing-function:linear;
}
.right-leave-active{
  animation-name: right-out;
  animation-timing-function:linear;
  animation-duration: .2s; 
}
@keyframes right-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  50% {
    transform: translate3d(50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes right-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(50%, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}

4.使用
使用如下代碼包含你要過渡的組件便可，注意，left是你要過渡的動畫名稱。

<transition name="left">

</transition>

5.使用ok，shop.vue 的html代碼最終以下

<template>
  <div id="shop" class="bgfff">
        <div class="topbg">
                <img class="topbgimg" :src="imgpath+shopinfo.image_path">
        </div>
        <div class="shoptop">
            <div class="toptop ih30">
              <router-link to="miste">
                  <icon class="backicon" name="back"></icon>
              </router-link>
              <span class="right">
                  <icon class="backicon2" name="cart"></icon>
                  <icon class="backicon2" name="more"></icon> 
              </span>
            </div>
            <div class="topfoot">
                <div class="topleft">
                    <img :src="imgpath+shopinfo.image_path">
                </div>
                <div class="topright nowarp">
                    <div class="foota">
                        <div class="footamain fs1-2 nowarp">{{shopinfo.name}}</div>
                        <icon name="right" class=" icon3"></icon>
                    </div>
                    <div class="footb nowarp">
                        <div class="nowarp">公告:{{shopinfo.promotion_info}}</div>
                    </div>
                    <div class="footc">
                        <span class="footcmain"><span v-if="shopinfo.delivery_mode">{{shopinfo.delivery_mode.text}}•</span><span>約{{shopinfo.order_lead_time}}</span></span>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="shopmid mgtop10">
            <div v-if="shopinfo.activities" class="midtop"><span class="te mgr5">{{shopinfo.activities[0].icon_name}}</span><span>{{shopinfo.activities[0].description}}</span><span class="right">{{shopinfo.activities.length}}個活動 <icon name="down" class="icon4"></icon></span></div>
            <div class="mytab">
                <div @click="shoporscore=true" :class="{ on:shoporscore }">商品</div>
                <div @click="shoporscore=false" :class="{ on:!shoporscore }">評價{{shopinfo.rating}}分</div>
            </div>
        </div>

    <transition name="left">
    <div v-if="shoporscore" class="shopmain">
        <div class="mianleft">
            <div v-for="(item,index) in shopmean" @click="itemgo(index)" :class="{on:index==shopon}" class="leftdiv">
                <div >
                    <icon v-if="index==0" class="icon5" name="hot"></icon>
                    <icon v-if="index==1" class="icon5" name="discount"></icon>
                    <span class="fs0-8">{{item.name}}</span>
                </div>
            </div>
        </div>
        <div class="mainright">
            <div class="item" v-for="item in shopmean">
                <div class="itemtop padtop10 ih30 after">
                    <span class="fs15">{{item.name}}</span>
                    <span class="fs0-8 col9f">{{item.description}}</span>
                </div>
                <div class="itemmain">
                    <div v-for="items in item.foods" class="iteminfo after">
                        <div class="infoimgbox">
                            <img :src="imgpath+items.image_path">
                        </div>
                        <div class="inforight">
                            <div class="fs15 ih20">{{items.name}}</div>
                            <div class="ih15 col9f"><span class="fs10 mgl">{{items.tips}}</span></div>
                            <div class="ih15"><span v-if="false" class="fs10 mgl"><span class="zk">包裝費</span><span class="yh">{{}}</span></span></div>
                            <div class="ih20">
                              <span class="colred fs12">￥</span>
                              <span class="colred mgr5">{{items.specfoods[0].price}}</span>
                              <span v-if="items.specfoods[0].original_price" class="fs12 col9f midline">￥56</span>
                              <icon v-if="items.specfoods.length==1" name="add" class="addicon right" ></icon>
                              <span class="fs12 right gz" v-if="items.specfoods.length>1">選規則</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </transition>

    <transition name="left">
    <div v-if="shoporscore" class="foot">
      <div class="footleft">
          <div class="footlogo"><icon name="footcar" class="footicon"></icon></div>
          <div class="footmain">未選購商品</div>
      </div>
      <div class="footright">
          ￥20起送
      </div>
    </div>
    </transition>

    <transition name="right">
    <div class="score" v-if="!shoporscore">
        <div class="scoretop">
          <div class="scoretopleft">
              <div class="fs1-2 colf60">{{shopinfo.rating}}</div>
              <div class="fs15 col9f">綜合評價</div>
              <div class="fs0-8 col9f">高於周邊商家{{parseInt(scorerating.compare_rating*100)}}%</div>
          </div>
          <div class="scoretopright">
              <div><span class="fs15 col9f mgr5">評價服務</span><stars :num="scorerating.service_score.toFixed(1)"></stars><span class="colf60 right">{{scorerating.service_score.toFixed(1)}}</span></div>
              <div><span class="fs15 col9f mgr5">菜品評價</span><stars :num="scorerating.food_score.toFixed(1)"></stars><span class="colf60 right">{{scorerating.food_score.toFixed(1)}}</span></div>
              <div><span class="fs15 col9f mgr5">送達時間</span><span class="fs15 colf60">{{scorerating.deliver_time}}分鐘</span></div>
          </div>
        </div>
        <div class="scoremain">
              <div class="scoremaintop after">
                <div v-for="(item,index) in scoretags" class="ih30 fs0-8" :class="{sty2:item.unsatisfied,sty1:!(item.unsatisfied),on:index==scoreindex}">{{item.name}}({{item.count}})</div>
              </div>
              <div class="scoremaininfo">
                  <div v-for="item in score" class="scoreitem after">
                      <div class="scoreitemleft">
                          <img :src="imgaddpath(item.avatar)" >
                      </div>
                      <div class="scoreitemright fs12 col9f">
                          <div>
                              <span>{{item.username}}</span>
                              <span class="right">{{item.rated_at}}</span>
                          </div>
                          <div>
                              <stars :num="item.rating_star"></stars>
                          </div>
                          <div>
                              {{item.time_spent_desc}}
                          </div>
                          <div class="scoreimgbox">
                            <img v-for="itema in item.item_ratings" :src="imgaddpath(itema.image_hash)">
                          </div>
                          <div class="namebox">
                              <div v-for="itemb in item.item_ratings">{{itemb.food_name}}</div>
                          </div>

                      </div>
                  </div>
                
              </div>
        </div>
    </div>
    </transition>

    <load v-if="num!=1"></load>
  </div>
</template>

補充

1.mainleft側邊欄處，點擊事件 itemgo(index)與綁定的class shopo，原本是想作一個右側商品滑動，商品對應的分類在左側樓層中也會隨之添加選中的樣式，可是並無成功。因此各位老鐵忽略便可。