更改CSS动画定位点

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

您可以通过向.overlay元素添加transform-origin: top left;来执行此操作。 （不要忘记前缀（-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>