（六）使用transition组件实现过渡效果

一时失言乱红尘 2022-05-26 11:53 256阅读 0赞

在项目中使用<transition>组件实现过渡效果

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

1）条件渲染 (使用 v-if)

2）条件展示 (使用 v-show)

3）动态组件

4）组件根节点

a）使用transition组件的html代码如下

<transition name="fade">
      <div class="detail" v-show="detailShow">
        <div class="detail-wrapper">
          <div class="detail-main">
            <h1 class="name">{
       {seller.name}}</h1>
            
            <div class="star-wrapper">
              <star :size="48" :score="seller.score"></star>
            </div>
            <div class="title">
              <div class="line"></div>
              <div class="text">优惠信息</div>
              <div class="line"></div>
            </div>
            <ul class="supports" v-if="seller.supports">
              <li class="support-item" v-for="(item,index) in seller.supports">
                <span class="icon" :class="classMap[seller.supports[index].type]"></span>
                <span class="text">{
       {seller.supports[index].description}}</span>
              </li>
            </ul>
            <div class="title">
              <div class="line"></div>
              <div class="text">商家公告</div>
              <div class="line"></div>
            </div>
            <div class="bulletin">
              <p class="content">{
       {seller.bulletin}}</p>
            </div>
          </div>
        </div>
        <div class="detail-close" @click="hideDetail">
          <i class="icon-close"></i>
        </div>
      </div>
    </transition>

将v-show中的元素.detail中的代码包裹在transition里面

b）css如下

.detail
        position: fixed
        display: flex
        flex-direction:column
        top:0
        left:0
        z-index:100
        height: 100%
        width: 100%
        overflow: auto
        background: rgba(7,17,27,0.8)
        &.fade-enter-active,&.fade-leave-active
          transition:all 0.5s   /*指定渐变的一个效果以及过渡的时间*/
        &.fade.enter,&.fade-leave
          background:rgba(7,17,27,0)
        .detail-wrapper
          flex:1
          .detail-main
            margin-top:64px
            .name
              line-height:16px
              text-align: center
              font-size:16px
              font-weight:700
            .star-wrapper
              margin-top:18px
              padding:2px 0
              text-align:center
            .title
              display: flex
              width: 80%
              margin:28px auto 24px auto
              .line
                flex:1
                position:relative
                top:-6px
                border-bottom:1px solid rgba(255,255,255,0.2)
              .text
                padding:0 12px
                font-size:14px
                font-weight:700
            .supports
              width: 80%
              margin:0 auto
              .support-item
                padding:0 12px
                margin-bottom:12px
                font-size: 0
                &:last-child
                  margin-bottom:0
                .icon
                  display: inline-block
                  width:16px
                  height:16px
                  vertical-align: top
                  margin-right:6px
                  background-size :16px 16px
                  background-repeat :no-repeat
                  &.decrease
                    bg-image('decrease_2')
                  &.discount
                    bg-image('discount_2')
                  &.guarantee
                    bg-image('guarantee_2')
                  &.invoice
                    bg-image('invoice_2')
                  &.special
                    bg-image('special_2')
                .text
                  line-height:16px
                  font-size:12px
            .bulletin
              width: 80%
              margin:0 auto
              .content
                padding:0 12px
                line-height:24px
                font-size:12px
        .detail-close
          margin:0 auto

从上面的代码可以看出，是在.detail元素上书写过渡的效果，即下面的代码

&.fade-enter-active,&.fade-leave-active
          transition:all 0.5s
        &.fade.enter,&.fade-leave
          background:rgba(7,17,27,0)