vue.js開發外賣App項目的組件傳值總結(七)

彈出層透明度從0到1的過渡屬性的設置(採用的是1.0的語法)

指定過渡的動畫層設置transition，然後再以fade的名字設置fade-transition，其中&.fade-transition指定最終的狀態，

<div v-show="detailShow" class="details" transition="fade">
</div>

css樣式如下：

.details
       position: fixed
       left:0
       top:0
       overflow: auto
       width: 100%
       height: 100%
       z-index: 100
       transition: all 0.5s //key code
       backdrop-filter:blur(10px)  //該屬性設置背景的模糊效果
       &.fade-transition
         opacity: 1
         background-color:rgba(7,17,27,0.8)
       &.fade-enter,&.fade-leave
         opacity: 0
         background-color:rgba(7,17,27,0)

在商品頁面應用了flex自適應佈局

商品列表寬度固定爲80px，而右邊內容自適應手機屏幕

.goods
    display: flex
    .menu-wrapper
        flex: 0 0 80px
        width: 80px
     .foods-wrapper
         flex: 1    

在商品詳細內容頁應用了flex佈局

其中圖標大小固定爲50px,後面描述內容根據手機屏幕自適應

 .food-item
        display: flex
        padding-bottom: 18px
        margin: 18px
        border-1px(rgba(7, 17, 27, 0.1))
        &:last-child
          border-none()
          margin-bottom: 0
        .icon
          flex: 0 0 57px
          margin-right: 10px
        .content
          flex: 1

better-scroll的使用

首先在package.json文件中聲明，然後npm install安裝

 "dependencies": {
    "vue": "^1.0.21",
    "vue-resource":"^1.0.1",
    "vue-router":"^0.7.13",
    "babel-runtime": "^6.0.0",
    "better-scroll": "^0.1.7"
  }

購物車小球動畫的編寫

兩層：外層控制一個方向的變化，內層控制另一個方向的變化。