Vue+CSS实现渐变 半透明遮盖文字 点击显示全文取消遮盖

1.目标效果

2.实现思路

      默认指定列表最大高度，显示【显示全文】按钮，在显示全文前插入遮罩div。

      点击显示全文后取消列表高度限制，隐藏【显示全文】按钮和遮罩div。

3.实现代码

html部分

         

            

              
              
お知らせ
            
            

              

                

                  

                    ・{{notice.title}}
                  
                  
{{notice.date}}
                
              
              

                続きを表示
              
            
          

    

JS部分

    showAllNotice() {
      this.seeAllNotice = true;
    },

CSS部分

    .notice_list {
        max-height: 60px;
      }
      
      .ulBlend::before {
        content: "";
        position: absolute;
        width: 92%;
        height: 20px;
        margin-top: -24px;
        left: 13px;
        background: -webkit-gradient(
          linear,
          0 0,
          0 100%,
          from(rgba(255, 255, 255, 0.2)),
          to(rgba(255, 255, 255, 1))
        );
        background: -moz-linear-gradient(
          top,
          rgba(255, 255, 255, 0.2),
          rgba(255, 255, 255, 1)
        );
        background: -o-linear-gradient(
          top,
          rgba(255, 255, 255, 0.2),
          rgba(255, 255, 255, 1)
        );
        background: linear-gradient(
          top,
          rgba(255, 255, 255, 0.2),
          rgba(255, 255, 255, 1)
        );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0ff, endColorstr=#fff, GradientType=0);
      }

      .showAll {
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
      }