过渡效果失效

来源：16-16 详情弹层页（6）- header剩余组件实现（下）

慕后端3023708

2017-05-27

代码：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>

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)

写回答

3回答

Bullet_wu

2017-05-28

已采纳

//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)

慕粉1711228114

不行。

2017-07-03

共3条回复

南城未荒

2017-07-04

html =>

</transition>

css=>

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

transition: opacity .5s

.fade-enter, .fade-leave-to

opacity: 0

慕后端3023708

提问者

2017-05-31

.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

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) 这样就够了

2017-06-04

共1条回复

Vue.js2.5+cube-ui重构饿了么App（经典再升级）

掌握Vue1.0到2.0再到2.5最全版本应用与迭代，打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程

相似问题

购物车小球抛物线变化幅度

回答 1

老师如何实现cube-ui上的吸顶效果？

回答 1

为什么弹出层显示的时候没有过渡效果

回答 1

页面中的所有&失效了

回答 1

项目build后背景图片失效

回答 1

打开慕课网App查看更多内容