javascript - 框边框动画

当用户打开页面而不是仅单击鼠标时，如何在此代码笔中自动实现以下框边框动画。

https://codepen.io/joshlondon/pen/jbwMdd

这是此笔的相关代码。

$(document).ready(function(e) {

  $('.box').on('click', function() {
    $(this).toggleClass('is-selected');
  })

});

@keyframes lineFillHorz {
  from {
    width: 0;
  } to {
    width: 100%;
  }
}

@keyframes lineFillVert {
  from {
    height: 1px;
  } to {
    height: 100%;
  }
}

.box {
  border: 1px solid #ececec;
  cursor: pointer;
  display: block;
  width: 400px;
  height: 260px;
  margin: 2em auto;
  position: relative;

  $border-color: green;
  $border-size: 2px;
  $animation-speed: .4s;

  &.is-selected {
    &:before,
    &:after,
    > div:before,
    > div:after {
      background: $border-color;
      content: '';
      display: block;
      position: absolute;
    }

      &:before {
        width: $border-size;
        top: 0;
        right: 0;
        animation: lineFillVert $animation-speed ease forwards;
      }

      &:after {
        height: $border-size;
        right: 0;
        bottom: 0;
        animation: lineFillHorz $animation-speed ease forwards;
        animation-delay: .1s;
      }

    > div {

      &:before {
        width: $border-size;
        bottom: 0;
        left: 0;
        animation: lineFillVert $animation-speed ease forwards;
        animation-delay: .2s;
      }

      &:after {
        height: $border-size;
        top: 0;
        left: 0;
        animation: lineFillHorz $animation-speed ease forwards;
        animation-delay: .3s;
      }
    }
  }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div></div>
</div>

我不确定如何用html，css和js实现此功能。

任何帮助将不胜感激。

最佳答案

只需将类is-selected直接添加到div中即可。

<div class="box is-selected">
  <div></div>
</div>

除非您仍想使用click事件，否则无需使用javascript。

查看代码段：

@-webkit-keyframes lineFillHorz {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes lineFillHorz {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@-webkit-keyframes lineFillVert {
  from {
    height: 1px;
  }
  to {
    height: 100%;
  }
}

@keyframes lineFillVert {
  from {
    height: 1px;
  }
  to {
    height: 100%;
  }
}

.box {
  border: 1px solid #ececec;
  cursor: pointer;
  display: block;
  width: 400px;
  height: 260px;
  margin: 2em auto;
  position: relative;
}

.box.is-selected:before,
.box.is-selected:after,
.box.is-selected>div:before,
.box.is-selected>div:after {
  background: green;
  content: '';
  display: block;
  position: absolute;
}

.box.is-selected:before {
  width: 2px;
  top: 0;
  right: 0;
  -webkit-animation: lineFillVert 0.4s ease forwards;
  animation: lineFillVert 0.4s ease forwards;
}

.box.is-selected:after {
  height: 2px;
  right: 0;
  bottom: 0;
  -webkit-animation: lineFillHorz 0.4s ease forwards;
  animation: lineFillHorz 0.4s ease forwards;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}

.box.is-selected>div:before {
  width: 2px;
  bottom: 0;
  left: 0;
  -webkit-animation: lineFillVert 0.4s ease forwards;
  animation: lineFillVert 0.4s ease forwards;
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

.box.is-selected>div:after {
  height: 2px;
  top: 0;
  left: 0;
  -webkit-animation: lineFillHorz 0.4s ease forwards;
  animation: lineFillHorz 0.4s ease forwards;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

<div class="box is-selected">
  <div></div>
</div>

关于javascript - 框边框动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45030277/