从相对于固定 position 放大 animation

Question

我在这里有关于 codepen的示例代码

 .liel{ position: relative; }.parent{ position: fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(0, 0, 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 个矩形 - 一个红色和一个绿色。 绿色可以出现在屏幕上的任何位置。

我要创建的是将 animation 从绿色矩形的 position 放大到红色矩形的最终 position。 我试图以某种方式开始相对于绿色矩形的 position，但由于.parent元素也固定在 position 中，因此无法做到这一点。

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

有什么解决方法吗？

Answer 1

可能这可以帮助你。 （阅读this other stackoverflow answer）

 $(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, 0, 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>