对容器中的项目进行动画处理，以动画化并包含 100% 的容器

Animate item in container to animate and contain 100% of the container

本文关键字：动画 包含 100% 项目 处理      更新时间：2023-09-26

我正在尝试对容器中的项目列表进行动画处理，以便在单击后过渡到其容器的 100% 高度和宽度。

一旦将单击的项目设置为绝对，我似乎无法找到一种很好的方法来实现这一目标，而不会破坏布局。有没有办法在绝对的情况下保留其在布局中的位置，然后过渡到 100% 的宽度和高度。以及向上和向右过渡，如果它在我的基本网格的右下角。

这是我的网页：

<div class="container">
  <div class="item">Some Content</div>
  <div class="item">Some Content</div>
  <div class="item">Some Content</div>
  <div class="item">Some Content</div>
</div>

.css： 

.container {
  position: relative;
  display: flex;
  width: 100%;
  height: 420px;
  background: green;
  flex-wrap: wrap;
}
.item {
  width: calc(50% - 10px);
  margin: 5px;
  background: red;
  height: 200px;
  text-align: center;
}
.item.active {
  position: absolute;
  transition: all 0.3s linear;
  top: 0;
  left: 0;
}

.js： 

var parent = document.querySelector('.container');
var items = document.querySelectorAll('.item');
var manipulateDOM = function(item) {
    //make item animate and contain the entire parent .container.
  item.classList.add('active');
  var height = parent.clientHeight;
  var width = parent.clientWidth;
  item.style.height = height + 'px';
  item.style.width = width + 'px';
};
for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function(event) {
        manipulateDOM(event.target);
    });
}

或

这是到目前为止我所得到的，如果这有助于理解问题。

https://jsfiddle.net/zyo335qy/2/

有几个问题需要解决。

  • 将目标div 从相对转换为绝对会在布局中创建一个"洞"，导致所有后来的（相对）div 向左和/或向上移动以取代它的位置。因此，不是简单地转换目标div，而是必须克隆它，即使它不会被看到，原始副本也只能成为占位符。当然，这可能会导致问题，具体取决于已复制的内容（例如重复的 id）。一个更优雅和强大的解决方案是删除目标div 并在同一位置重新插入一个"虚拟"相对div，但为了简单起见，我在这里没有实现它。
  • 必须从目标元素中检索起始顶部和左侧值，以便动画知道从哪里开始，从那里移动到 0，0。这可以通过offsetTop和offsetLeft来实现。
  • 出于我必须承认我不完全理解的原因（一些有见地的评论会有所帮助），仅设置目标顶部、左侧、高度和宽度值是行不通的。它们必须嵌入setTimeout.0 毫秒甚至 10 毫秒的延迟在一定程度上起作用，但不是所有时间都有效。50 毫秒的延迟似乎始终有效，但这可能需要进一步测试。
  • 必须调整顶部、左侧、高度和宽度值以考虑边距。

更新：此解决方案似乎适用于Firefox v44.0.2（Mac和Windows）和Chrome（Mac v48.0.2564.103和Windows v48.0.2564.116），但不适用于Safari（Mac v9.0.3）和Internet Explorer（Windows v11.0.28）。要更清楚地看到正确或不正确的行为，请将 setTimeout 延迟增加到 2000 毫秒。 

var parent = document.querySelector('.container');
var items = document.querySelectorAll('.item');
var manipulateDOM = function(origItem) {
    //make item animate and contain the entire parent .container.
  var item = origItem.cloneNode(true);
  var top = origItem.offsetTop;
  var left = origItem.offsetLeft;
  item.classList.add('active');
  parent.appendChild(item);
  var height = parent.clientHeight;
  var width = parent.clientWidth;
  item.style.top = (top - 5) + 'px';
  item.style.left = (left - 5) + 'px';
  window.setTimeout(function () {
    item.style.top = '0px';
    item.style.left = '0px';
    item.style.height = (height - 10) + 'px';
    item.style.width = (width - 10) + 'px';
  }, 50);
};
for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function(event) {
        manipulateDOM(event.target);
    });
}
.container {
  position: relative;
  display: flex;
  width: 100%;
  height: 420px;
  background: green;
  flex-wrap: wrap;
}
.item {
  width: calc(50% - 10px);
  margin: 5px;
  background: red;
  height: 200px;
  text-align: center;
}
.item.active {
  position: absolute;
  transition: all 0.3s linear;
}
<div class="container">
  <div class="item">Some Content A</div>
  <div class="item">Some Content B</div>
  <div class="item">Some Content C</div>
  <div class="item">Some Content D</div>
</div>

尝试 this.is 你想要的。我只为两个div（只有一个和两个）实现了它，并具有两种不同的效果。我用jquery和这个.只需复制，粘贴并尝试它.你可以像这样实现它。如果不是这种情况告诉我。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
	.container {
  position: relative;
  display: flex;
  width: 100%;
  height: 420px;
  background: green;
  flex-wrap: wrap;
}
.item {
  width: calc(50% - 10px);
  margin: 5px;
  background: red;
  height: 200px;
  text-align: center;
}
.item.active {
  position: absolute;
  transition: all 0.3s linear;
  top: 0;
  left: 0;
}
</style>
<body>
<div class="container">
  <div class="item" id="one">Some Content</div>
  <div class="item" id="two">Some Content</div>
  <div class="item" id="three">Some Content</div>
  <div class="item" id="four">Some Content</div>
</div>
  
 <script type="text/javascript">
  $(document).ready(function(){
  	
  	$("#one").click(function(){
  		$(this).animate({width:"100%",height:"410px"});
  		$("#two,#three,#four").hide();
  	});
  	$("#two").click(function(){
  		$(this).fadeOut().animate({width:"100%",height:"410px"}).fadeIn(1000);
  		$("#one,#three,#four").hide();
  	});
 
  });
 
 </script>
</body>
</html>

相关文章：