在开发Vue.js高仿饿了么项目中,在设计header.vue的详情弹层页的代码中为了使其不要显得太简单,我们给该详情弹层页设计了颜色过渡的动画,但在原版的代码中它使用的transition属性代码模型如下:
<div v-show="detailShow" class="detail" transition="fade">
<!-- 内容区域 -->
<div class="detail-wrapper clearfix">
</div>
<!-- 关闭按钮 -->
<div class="detail-close" @click="hideDetail">
<i class="icon-close"></i>
</div>
</div>
.details
position: fixed
left:0
top:0
overflow: auto
width: 100%
height: 100%
z-index: 100
transition: all 0.5s
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)
但如果你照着这么做的话,你就会发现该属性没有起作用或者报错,这是因为上面的是Vue1.0版本的写法,在Vue2.0之后transition不在作为一个属性了,而是标签。而我们现在自动安装Vue.js都是2.0版本的。
<transition name="fade">
<div v-show="detailShow" class="detail">
<!-- 内容区域 -->
<div class="detail-wrapper clearfix">
</div>
<!-- 关闭按钮 -->
<div class="detail-close" @click="hideDetail">
<i class="icon-close"></i>
</div>
</div>
</transition>
.detail
position: fixed
left:0
top:0
overflow: auto
width: 100%
height: 100%
z-index: 100
opacity 1
background rgba(7,17,27,0.8)//渐变结束后的最终效果
&.fade-enter-active, &.fade-leave-active//渐变的进入和退出都历时0.5s
transition all 0.5s
&.fade-enter, &.fade-leave-to//定义进入前和退出后样式,即透明无色背景。
opacity 0
background rgba(7,17,27,0)
通过对比,我们发现无论是无论是Vue2.0的transition使用的HTML代码还是CSS代码都与Vue1.0的有较大的不同,所以在写代码时要注意,以免报错。