慕課vue仿餓了么點(diǎn)擊底部出現(xiàn)菜單的出現(xiàn)的動(dòng)畫(huà)跟預(yù)想的相反。它是從上而下出現(xiàn) 對(duì)動(dòng)畫(huà)鉤子不是很理解不知道問(wèn)題在哪？

html

<transition name="fold">
      <div class="shopcart-list" v-show="listShow">
        <div class="list-header">
          <h1 class="title">購(gòu)物車(chē)</h1>
          <span class="empty">清空</span>
        </div>
        <div class="list-content">
          <ul>
            <li v-for=" food in selectFoods">
              <span class="name">{{food.name}}</span>

              <div class="price">
                <span>￥{{food.price*food.count}}</span>
              </div>
              <div class="buycontrol-wrapper">
                <buycontrol :food="food"></buycontrol>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </transition>

css

.shopcart-list {
    position: absolute;
    left: 0;
    top:0
    width: 100%;
    z-index: -1;
  }
  .fold-enter-active,.fold-leave-active{
    transition: all .5s ease;

  }
  .fold-enter,.fold-leave-to{
    transform: translate3d(0,-100%,0);
  }