Question

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

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

以下是此代码笔中的相关代码。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

非常感谢任何帮助。

Answer 1

只需将班级is-selected直接添加到div。

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

除非您仍想使用点击事件，否则无需使用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>

Answer 2

将JavaScript替换为：

$(document).ready(function () {
  $('.box').toggleClass('is-selected');
});

<强>段

$(document).ready(function () {
  $('.box').toggleClass('is-selected');
});

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

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

框边框动画

2 个答案: