通过animation实现display的block与none的动画效果

最新推荐文章于 2024-12-06 17:15:00 发布

yumihe

最新推荐文章于 2024-12-06 17:15:00 发布

阅读量1.1w

点赞数

分类专栏： css3 文章标签： mpvue css3 animation

本文链接：https://blog.csdn.net/qq_32678401/article/details/81609028

版权

css3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用HTML、Stylus和JavaScript来创建一个可以动态显示和隐藏的遮罩层效果。通过简单的代码示例展示了如何利用Vue.js的数据绑定特性控制遮罩层的显示状态，并使用Stylus实现平滑的过渡动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<!--遮罩层-->
<div class="list-mask"
     :class="listShow ? 'show' : ''"
     @tap="hideList">
</div>

js:

data() {
  return {
    showList: false // 开始隐藏
  }
},
methods: {
  hideList() {
    this.showList = false
  }
}

stylus:

<style scoped lang="stylus" rel="stylesheet/stylus">
.list-mask
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: -2
  backdrop-filter: blur(10px)
  opacity: 1
  background: rgba(7, 17, 27, .6)
  display: none
  &.show
    display: block
    animation: show .5s

@-webkit-keyframes show
  0%
    opacity: 0
    background: rgba(7, 17, 27, 0)
  100%
    opacity: 1
    background: rgba(7, 17, 27, .6)  
</style>