将元素插入flexbox时CSS过渡，而无需添加/删除CSS类 [英] CSS transition upon insertion of element into flexbox WITHOUT adding/removing CSS class

问题描述

假设我没有访问JavaScript的权限，只能编辑CSS.

Let's assume I don't have access to JavaScript and can only edit CSS.

我仍然应该能够定义一个过渡，以便当JS(我无法控制)将新元素插入flex容器时，容器会平滑扩展，对吗?

I still should be able to define a transition such that when JS (that I don't control) inserts a new element into a flex container the container widens smoothly, right?

// For the purposes this demo (to make it useful for my actual challenge), 
// the only "allowed" JS is JS that adds or deletes an item within the container.

function insertOrDeleteExtraElement() { 
  const div = document.getElementById("new");
  if (div) {
     div.parentNode.removeChild(div);
  } else {
     const newDiv = document.createElement('div');
     newDiv.innerHTML = "Inserting or deleting this should transition the container's width smoothly, honoring the transition duration.";
     newDiv.id = "new";
     document.getElementById("container").appendChild(newDiv);
  }
}

#container {
  border: 2px dashed blue;
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 250px;
  transition: all 1s;
}
input {
  flex: 1 1 100px;
  transition: all 1s;
}
#new {
    flex: 1 1 100%;
    display: block;
    border: 1px solid red;
    height: 120px;
    transition: all 1s;
}
.old {
    background: #ccc;
    border: 1px solid black;
}

<button onclick="insertOrDeleteExtraElement();" style="font-size: 16px;">Click here</button>
<br/>
<div id="container">
  <input type="text" value="old input" class="old"/>
  <div class="old">old div</div>
</div>

如何仅使用CSS来实现我的目标(不更改JavaScript或HTML)?

过去几年中类似的问题(例如

Similar questions in years past (such as Is it possible to animate flexbox inserts, removes, and item position?) have collected answers about how to define CSS transitions, but they all required JavaScript to add or remove class names of an element.

为了澄清:我不希望JavaScript操作任何现有元素的classList.唯一允许使用的JavaScript是将 new 元素实际插入到flexbox容器中，例如在我的示例中.

To clarify: I don't want JavaScript manipulating classList of any existing element. The only allowed JavaScript would be the actual insertion of a new element into the flexbox container, such as in my example here.

P.S.另外，我需要将new元素放在单独的行上，这就是为什么我使用 flex-wrap:wrap; .

P.S. Also, I need the new element to be on its own line, which is why I'm using flex-wrap: wrap;.

推荐答案

您可以像下面那样进行插入.我怀疑您会因为删除而运气不佳，因为CSS之前的remove事件无法做某事.

You can do like below for the insertion. I doubt you will have luck with the deletion since CSS cannot the remove event to do something before.

// For the purposes this demo (to make it useful for my actual challenge), 
// the only "allowed" JS is JS that adds or deletes an item within the container.

function insertOrDeleteExtraElement() { 
  const div = document.getElementById("new");
  if (div) {
     div.parentNode.removeChild(div);
  } else {
     const newDiv = document.createElement('div');
     newDiv.innerHTML = "Inserting or deleting this should transition the container's width smoothly, honoring the transition duration.";
     newDiv.id = "new";
     document.getElementById("container").appendChild(newDiv);
  }
}

#container {
  border: 2px dashed blue;
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 250px;
  transition: all 1s;
}
input {
  flex: 1 1 100px;
  transition: all 1s;
}
.old {
    background: #ccc;
    border: 1px solid black;
}
#new {
    flex: 1 1 0;
    border: 1px solid red;
    animation:grow 1s forwards;
    
    height:0;
    flex-basis:0;
    min-width:0;
    overflow:hidden;
}
@keyframes grow {
  to {
    height:120px;
    flex-basis:100%;
  }
}

<button onclick="insertOrDeleteExtraElement();" style="font-size: 16px;">Click here</button>
<br/>
<div id="container">
  <input type="text" value="old input" class="old"/>
  <div class="old">old div</div>
</div>

这篇关于将元素插入flexbox时CSS过渡，而无需添加/删除CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！