Vue+CSS實現漸變 半透明遮蓋文字 點擊顯示全文取消遮蓋

1.目標效果

2.實現思路

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

      點擊顯示全文後取消列表高度限制，隱藏【顯示全文】按鈕和遮罩div。

3.實現代碼

html部分

         <div class="notice_box">
            <div>
              <img src="/img/notice.svg" alt />
              <p>お知らせ</p>
            </div>
            <div>
              <ul :class="{notice_list:!seeAllNotice}">
                <li v-for="(notice,index) in noticeList" :key="index" class="notice_item">
                  <p>
                    <u>・{{notice.title}}</u>
                  </p>
                  <p>{{notice.date}}</p>
                </li>
              </ul>
              <div
                :class="{
                showAll:true,
                ulBlend:!seeAllNotice
                }"
                @click="showAllNotice"
                v-show="!seeAllNotice"
              >
                <u>続きを表示</u>
              </div>
            </div>
          </div>

    

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;
      }