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，本来是想做一个右侧商品滑动，商品对应的分类在左侧楼层中也会随之添加选中的样式，但是并没有成功。所以各位老铁忽略即可。