Question

我在另一个元素的中心放置了一个圆，当我将鼠标悬停时，应该会出现一个框阴影，并且它应该稍微移动。这可行，但是由于某些原因，当我刷新页面时，圆圈从右下角很快移到中心。此动作是动画的，仅在刷新页面时发生。为什么会这样？

 <div class="col-1-of-2">
      <div class="bg-video">
        <div class="bg-video__circle">
          &nbsp;
        </div>
      </div>
</div>

.bg-video {
    position: relative;
    background-image: linear-gradient(rgba($color-primary, 0.8), rgba($color-secondary, 0.8)),  url(../img/hero.jpg);
    background-size: cover;
    height: 39rem;
    width: auto;

    &__circle {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%,-50%,0);
        width: 15rem;
        height: 15rem;
        border-radius: 50%;
        background-color: $color-white;
        transition: box-shadow .4s, transform .4s;

        &:hover {

            box-shadow: 0 1rem 2rem rgba(#000, .4);  
            transform: translate3d(-50%,-52%,0);
            cursor: pointer;

        }
    }
}

这是编译后的CSS

.bg-video {
  position: relative;
  background-image: linear-gradient(rgba(41, 128, 185, 0.8), rgba(142, 68, 173, 0.8)), url(../img/hero.jpg);
  background-size: cover;
  height: 39rem;
  width: auto; }
  .bg-video__circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: #fff;
    transition: box-shadow .4s, transform .4s; }
    .bg-video__circle:hover {
      box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
      transform: translate3d(-50%, -52%, 0);
      cursor: pointer; }

Answer 1

由于transition上有一个transform，因此您已将其从元素的默认状态设置为非0,0。因此，&__circle在刷新时加载时，它的动画效果是从0,0到通过translate3d(-50%,-50%,0)进行转换，因为过渡：box-shadow .4s， transform .4s ;告诉。可以预料的。干杯！

实际悬停元素之前发生的动画

1 个答案: