将鼠标悬停在Flexbox列上可将它们移动到一起

Question

我试图将鼠标悬停在右侧的每一列上，并让它们展开，而其余的则收缩。问题是，如果紫色的状态当前正在转换为收缩状态，而我很快将鼠标悬停在蓝色的状态上，则它们都会收缩。

我们的目标是让蓝色的同时打开，而其他的则收缩。开放使用JS。

下面是一个示例，尝试将紫色完全展开，然后快速转到蓝色列：

https://codepen.io/niko-dellic/pen/MWvvGMz

​

#wrapper {
  height: 100vh;
  display: flex;
  flex-direction: row;
  transition: 1s ease-in-out;
}

#wrapper>* {
  flex: 0 1 2vw;
  /* outline: 0; */
  transition: 1s ease-in-out;
  border: 1px solid black;
}

#wrapper>div:hover {
  /* flex: 1 1 33vw; */
  flex-grow: 1;
  transition: 1s ease-in-out;
}

#wrapper>#open {
  /* flex: 1 1 1vw; */
  flex-grow: 2;
  transition: 1s ease-in-out;
}

#wrapper>#closed {
  transition: 1s ease-in-out;
}

<div id="wrapper">
  <div class='chapter' style="background-color:red;"></div>
  <div class='chapter' id="open"></div>
  <div class='chapter' style="background-color:blue;"></div>
  <div class='chapter' style="background-color:green;"></div>
  <div class='chapter' style="background-color:purple;"></div>
</div>

​

Answer 1

我从来没有想过css过渡/动画可能会弄乱你的css hover 伪状态。

您当然可以通过减少转换时间来缓解这些问题。(或者更确切地说是防止不需要的显示状态)

老实说，我不是一个浏览器/css渲染引擎开发人员，但我认为，在转换过程中不断变化的悬停区域导致了这种行为。

此外，我非常确定这是一个故意实现的行为，以防止在2个flex-grow:状态之间转换时进行过多的宽度计算。

但是，我假设您想要用内容(文本、图像等)填充可折叠/可扩展的容器。从usability和accessibility的角度来看，无论如何都应该使用基于单击事件的布局过渡/动画。

你基本上是在搜索一个水平折叠的概念，它可以折叠或扩展你的内容。我发现Arjan Jassal的这支笔可能是一个很好的模板pen by Arjan Jassal

这是一个普通的js版本。

​

var sections = document.querySelectorAll('.li-acc-hor');

function toggleAccordion(sections, current) {
    if(sections.length){
        for (var i=0; i<sections.length; i++){
              sections[i].classList.remove('active');
        }
        current.classList.add('active');
    }
}

if(sections.length){
    for (var i=0; i<sections.length; i++){
        sections[i].addEventListener('click', function(e){
            var thisBtn = e.target.closest('.li-acc-hor');
            toggleAccordion(sections, thisBtn);         
        } )
    }
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI";
  font-size:1vw;
}

ul {
  display: flex;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}

li {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 0.1vw;
  background: #E74C3C;
  cursor: pointer;
  transition: all 0.5s ease;
}

li:hover {
  background: #e53f2e;
}
li.active {
  flex: 5;
  background: #fff;
  cursor: default;
}
li.active h2 {
  color: #E74C3C;
}
li.active .section-content {
  flex: 4;
  opacity: 1;
  transform: scaleX(1);
  color: #E74C3C;
}
li .section-title {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: white;
}
li .section-title h2 {
  margin: 0;
  transform: rotate(-90deg);
  white-space: nowrap;
}
li .section-content {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.25s 0.1s ease-out;
}

<ul class="ul-acc-hor">
  <li class="li-acc-hor">
    <div class="section-title">
      <h2>Section 1</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum temporibus dicta reprehenderit tempore quisquam consequuntur porro omnis laboriosam praesentium at et sapiente, provident sit! Suscipit recusandae, ab ratione dignissimos.</p>
    </div>
  </li>
  <li class="li-acc-hor active">
    <div class="section-title">
      <h2>Section 2</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora totam delectus, eius nostrum aspernatur voluptas enim fugit ipsa magni voluptatem, odio sit accusamus vel id, commodi consequuntur possimus repellat necessitatibus!</p>
    </div>
  </li>
  <li class="li-acc-hor">
    <div class="section-title">
      <h2>Section 3</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur saepe vel facilis quae nihil ad aspernatur ex delectus. Tenetur nulla voluptates similique quos, quia possimus, magnam esse natus quis ipsa.</p>
    </div>
  </li>
  <li class="li-acc-hor">
    <div class="section-title">
      <h2>Section 4</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, optio illo, delectus deleniti animi accusamus. Laboriosam maiores totam provident aliquam. Unde, incidunt amet officia a obcaecati, ducimus at molestiae nemo.</p>
    </div>    
  </li>
</ul>

​

添加javaScript而不是“仅css”的好处

1. Hover/Mouseover状态在移动/触摸设备上不能正常使用。使用单击事件可以添加/切换与可见性相关的属性(例如，用于上下文“内容交付”的CSS类或ARIA-attributes)
2. Using单击事件)

可防止不需要的内容显示(例如，如果用户在阅读之前悬停的内容部分时意外移动了鼠标光标)