javascript - 更改 CSS 动画 anchor

Question

我有以下页面(见图片)

当我单击红色按钮时，我希望 div 在向用户显示时显示动画。但是，我希望动画来自按钮。现在动画来自页面的中心。

这是我的代码

@keyframes fadeInScale {
    0%{
        opacity:0;
        transform: scale(0.5);
    }
    100%{
        opacity:1;
        transform: scale(1);
    }
}

@keyframes fadeOutScale {
    0%{
        opacity:1;
        transform: scale(1);
    }
    100%{
        opacity:0;
        transform: scale(0.5);
    }
}

.overlay {
    position: absolute;
    top: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
}

.fade-scale-in {
    display: block;
    animation: fadeInScale 0.3s 1 ease-out;
}

.fade-scale-out {
    display: block;
    animation: fadeOutScale 0.3s 1 ease-out;
}

当我点击红色圆圈时，用户会看到一个覆盖页面(实际上是一个带有绝对定位类覆盖的 div)。我将 fade-scale-in 类添加到 div(带有类覆盖)。然后 div 从屏幕中心过渡并增大以适合用户的屏幕。我想要它，以便 div 从红色圆圈过渡。我可以使用转换来实现这一点吗？

这是代码。正如您所注意到的，当您单击黄色圆圈时，div 从中心而不是黄色圆圈开始动画: https://jsfiddle.net/e4g71y4m/3/

Answer 1

您可以通过添加 transform-origin: top left; 来完成此操作到 .overlay 元素。 (不要忘记前缀(-webkit、-moz 等)

var overlay$ = $('.overlay');
overlay$.bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) {
  console.debug('test');
  if (e.animationName !== undefined && e.animationName == "fadeOutScale") {
    overlay$.addClass('hide');
  } else if (e.originalEvent.animationName !== undefined && e.originalEvent.animationName == "fadeOutScale") {
    overlay$.addClass('hide');
  }
});

$('.click').on('click', function() {
  overlay$.removeClass('hide').addClass('fade-scale-in');
});
$('.click-again').on('click', function() {
  overlay$.removeClass('hide').addClass('fade-scale-out');
});

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOutScale {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

.hide {
  display: none;
}

.overlay {
  position: absolute;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
  transform-origin: top left;
}

.click {
  background: yellow;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
}
.fade-scale-in {
  display: block;
  animation: fadeInScale 0.3s 1 ease-out;
}

.fade-scale-out {
  display: block;
  animation: fadeOutScale 0.3s 1 ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">Click me</div>
<div class="overlay hide">
  Test
  <div class="click-again">Click me again</div>
</div>