vue1.0 transition效果

Posted on Edited on In

html

1
2
3
4
5
<div v-show="detailShow" class="detail" transition="fade">
.
.
.
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
.detail{position: fixed;z-index: 100;width: 100%; height: 100%;overflow:auto;background: rgba(7,17,27,0.8);top: 0; left: 0;transition: all 0.5s;backdrop-filter:blur(10px);
}
/*动画结束的状态*/
.detail.fade-transition{
 opacity: 1;
 background: rgba(7,17,27,0.8);
}
/*动画开始的状态*/
.detail.fade-enter,.detail.fade-leave{
 opacity: 0;
 background: rgba(7,17,27,0);
}