过渡效果失效

Question

代码：html

<div v-show="detailShow" class="detail" transition="fade">
 <div class="detail-wrapper clearfix">
   <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>
     <div v-if="seller.supports" class="supports">
       <li class="support-item" v-for="item in seller.supports" >
       <span class="icon"
             :class="classMap[item.type]"></span>
         <span class="text">{{item.description}}</span>
       </li>
     </div>
     <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>

css

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

Answer 1

Bullet_wu 2017-05-28 10:17:22

<transition name="fade">

//detail

</transition>

.detail
 position fixed
 z-index: 100
 top: 0
 left: 0
 width: 100%
 height: 100%
 overflow: auto
 background-color: rgba(7, 17, 27, 0.8)
 backdrop-filter: blur(10px) //高斯模糊
 transition: all 0.5s //动画过度时间
 &.fade-leave-active
   opacity: 0
   background-color: rgba(7, 17, 27, 0)
 &.fade-enter-active
   opacity: 1
   background-color: rgba(7, 17, 27, 0.8)
 &.fade-enter
   opacity: 0
   background-color: rgba(7, 17, 27, 0)

• 提问者 慕后端3023708 #1

  动画时间只有0.5s，然后背景消失

• 提问者 慕后端3023708 #2

  detail这个类里原始的透明度和背景要加上

• 慕粉1711228114 #3

  不行。

Answer 2

南城未荒 2017-07-04 17:26:18

html =>

<transition name="fade">

    <!-- 渐变对象元素 -->

</transition>

css=>

.fade-enter-active, .fade-leave-active

      transition: opacity .5s

.fade-enter, .fade-leave-to

      opacity: 0

Answer 3

提问者 慕后端3023708 2017-05-31 10:00:17

.detail
 position fixed
 z-index: 100
 top: 0
 left: 0
 width: 100%
 height: 100%
 overflow: auto
 background-color: rgba(7, 17, 27, 0.8)
 backdrop-filter: blur(10px) //高斯模糊

 opacity:1
 background: rgba(7,17,27,0.8) transition: all 0.5s //动画过度时间
 &.fade-leave-active
   opacity: 0
   background-color: rgba(7, 17, 27, 0)
 &.fade-enter-active
   opacity: 1
   background-color: rgba(7, 17, 27, 0.8)
 &.fade-enter
   opacity: 0
   background-color: rgba(7, 17, 27, 0)

• Bullet_wu #1

  background-color: rgba(7, 17, 27, 0.8)
        backdrop-filter: blur(10px) //高斯模糊
        transition: all 0.5s //动画过度时间
        &.fade-enter ,&.fade-leave-active
          opacity: 0
          background-color: rgba(7, 17, 27, 0)
  这样就够了