实现鼠标悬浮时边框上面有一条线动画出现

标签：mouse   anim   height   spl   col   div   box   ado   sele   

// 鼠标悬浮时候，可以有线条从左到右出现的动画效果，移开时从右到左消失的效果
<template>
  <div class="animation">
    <div class="box" @mouseenter="enterTop" @mouseleave="leaveTop">
      <div class="top-border"></div>
      <div class="box-content"></div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    enterTop() {
      let topbor = document.querySelector(‘.top-border‘)
      topbor.style.transition = "0.5s"
      topbor.style.width = "800px"
    },
    leaveTop() {
      let topbor = document.querySelector(‘.top-border‘)
      topbor.style.transition = "0.5s"
      topbor.style.width = "0%"
    }
  }
}
</script>

<style lang="scss" scoped>
  .animation {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    .box {
      width: 800px;
      height: 400px;
      .top-border {
        width: 0%;
        height: 3px;
        background: #5288f5;
      }
      .box-content {
       width: 100%;
       height: 100%;
        background-color: bisque;
        &:hover {
          box-shadow: 0 0px 8px 1px #5288f5;
          // border-top: solid 2px #5288f5;
        }
      }
    }
  }
</style>

实现鼠标悬浮时边框上面有一条线动画出现

标签：mouse   anim   height   spl   col   div   box   ado   sele   

原文地址：https://www.cnblogs.com/zhongfang/p/14809647.html