相对于固定位置的ZoomIn动画

问题描述

我在codepen here上有示例代码

.liel{
  position: relative;
}

.parent{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(0,.8);
  z-index:100;
}

.green{
  width:100px;
  height:100px;
  background-color:green;
}

@keyframes zoomIn {
  0%{
    top:0;
    left:0;
    width:100px;
    height:100px;
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

.zoom{
  width:200px;
  height:200px;
  background-color:red;
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  animation: zoomIn 5s;
}

<ul>
  <li class="liel">
      <div class="green"></div>
    <div class="parent">
      <div class="zoom"></div>
    </div>
  </li>
</ul>

有2个矩形-一个红色和一个绿色。 绿色可以在屏幕上的任何地方。

我要创建的是从绿色矩形位置到红色矩形最终位置的放大动画。我正在尝试以某种方式获取相对于绿色矩形的起始位置，但是由于.parent元素也固定在位置上，因此无法做到这一点。

当前红色元素具有放大效果，但初始位置为left:0 top:0，即.parent而不是.green的位置。

有什么解决方法吗？

解决方法

也许这可以为您提供帮助。 （阅读this其他stackoverflow答案）

$(document).ready(function() {
setTimeout( function(){
    $('.green').addClass('fixed');
},1000);
    $('.green').css('position','fixed');
});   

.liel{
  position: relative;
}

.parent{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(0,.2);
  z-index:100;
  pointer-events: none;
}

.green {
  width:100px;
  height:100px;
  background-color:green;
  transition: all 5s ease-in-out;
}

  

.zoom{
  width:200px;
  height:200px;
  background-color:red;
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  animation: zoomIn 5s;
}

.fixed {
  animation: zoomIn 5s;
  transform: translate(-50%,-50%);
  width:200px;
  height:200px;
    top:50%;
    left:50%;
}

@keyframes zoomIn {
  0%{
    top:0;
    left:0;
    width:100px;
    height:100px;
    opacity: 0;
 
  }
  100%{
    opacity: .5;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="liel">
      <div class="green"></div>
    <div class="parent">
      <div class="zoom"></div>
    </div>
  </li>
</ul>