vue/cli 移入移出要怎么实现

Question

鼠标移入移出时候改阴影层高度

使用css3，会有bug

Answer 1

简单写了一个小demo，你看下是不是你要的效果

HTML

    <div class="pat-wrap">
      <div>
        <img
          class="pat-img"
          src="https://avatar.csdnimg.cn/B/0/B/1_iskelel_1617344422.jpg"
        />
      </div>
      <div class="pat-shade">
        <p>隐藏</p>
        <p>隐藏</p>
        <p>隐藏</p>
      </div>
    </div>

CSS

      .pat-wrap {
        position: relative;
        overflow: hidden;
        width: 150px;
        height: 150px;
      }
      .pat-shade {
        position: absolute;
        width: 100%;
        bottom: -50px;
        height: 100px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: bottom ease-out .2s;
      }
      .pat-wrap:hover .pat-shade {
        bottom: 0;
      }