2023年3月21日 00:48:43go评论73阅读模式

英文:

Max-height transition in table

问题

以下是代码部分的翻译：

const span = document.querySelectorAll('td>span')

const getCells = td => td.target.closest('tr').querySelectorAll('td>span')

span.forEach(e => e.addEventListener(
  "mouseenter",
  (event) => {
 getCells(event).forEach(child => child.classList.add('heightAuto'))
  },
  false
));

span.forEach(e => e.addEventListener(
  "mouseout",
  (event) => {
getCells(event).forEach(child => child.classList.remove('heightAuto'))
  },
  false
));

table {
  border-collapse: collapse;
}

td>span {
  border: 1px solid black;
  padding: 5px;
  overflow: hidden; 
  transition: all 1s ease-in-out; 
  max-height: 60px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heightAuto {
  max-height: none !important;
}

<table>
  <tr>
    <td><span>这里是文本示例。Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <td><span>这里是文本示例。Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
    <!-- 其他行类似 -->
  </tr>
  <!-- 其他行类似 -->
</table>

请注意，上述代码是在HTML、CSS和JavaScript中进行的操作，已经翻译成中文。如果您有其他问题或需要更多帮助，请随时提出。

英文:

const span = document.querySelectorAll(&#39;td&gt;span&#39;)

const getCells = td =&gt; td.target.closest(&#39;tr&#39;).querySelectorAll(&#39;td&gt;span&#39;)

span.forEach(e =&gt; e.addEventListener(
  &quot;mouseenter&quot;,
  (event) =&gt; {
 getCells(event).forEach(child =&gt; child.classList.add(&#39;heightAuto&#39;))
  },
  false
));

span.forEach(e =&gt; e.addEventListener(
  &quot;mouseout&quot;,
  (event) =&gt; {
getCells(event).forEach(child =&gt; child.classList.remove(&#39;heightAuto&#39;))
  },
  false
));

table {
  border-collapse: collapse;
}

td&gt;span {
  border: 1px solid black;
  padding: 5px;
  overflow: hidden; 
  transition: all 1s ease-in-out; 
  max-height: 60px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heightAuto {
  max-height: none !important;
}

    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;

Live example : https://codepen.io/chrisspb/pen/KKxxqoo

I set a max-height limit to each row on the table and when my mouse hovers a cell, all of the row's cells display their full length.
To do so, I had to add an HTML attribute in the "td", the max-height did not work on rows.

I would like to add a transition effect on the max-height changes to display it in a softer way.

I have tried with "transition" property but it has no effect.
Is it possible and what can I do?

答案1

得分: 1

以下是翻译好的部分：

你不能过渡到或从`none`或`auto`这样的值；相反，你可以只过渡到一个非常大的数字。在下面的示例中，我使用了1000px，但你可以使用任何你喜欢的数字。

const span = document.querySelectorAll('td>span')

const getCells = td => td.target.closest('tr').querySelectorAll('td>span')

span.forEach(e => e.addEventListener(
  "mouseenter",
  (event) => {
    getCells(event).forEach(child => child.classList.add('heightAuto'))
  },
  false
));

span.forEach(e => e.addEventListener(
  "mouseout",
  (event) => {
    getCells(event).forEach(child => child.classList.remove('heightAuto'))
  },
  false
));

table {
  border-collapse: collapse;
}

td>span {
  border: 1px solid black;
  padding: 5px;
  overflow: hidden; 
  transition: all 1s ease-in-out; 
  max-height: 60px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heightAuto {
  max-height: 1000px !important;
}

<table>
  <tr>
    <td><span>...</span></td>
    <td><span>...</span></td>
    <td><span>...</span></td>
    <td><span>...</span></td>
    <td><span>...</span></td>
  </tr>
  <tr>
    <td><span>...</span></td>
    <td><span>...</span></td>
    <td><span>...</span></td>
    <td><span>...</span></td>
    <td><span>...</span></td>
  </tr>
  ...
</table>

注意：这里提供的翻译中包含了代码部分。如果需要去除代码，您可以在需要翻译的内容中进行相应的删减。

英文:

You can't transition to or from values like none or auto; instead, you can just transition to a really big number. In the below example, I used 1000px, but you can use whatever number you like.

const span = document.querySelectorAll(&#39;td&gt;span&#39;)

const getCells = td =&gt; td.target.closest(&#39;tr&#39;).querySelectorAll(&#39;td&gt;span&#39;)

span.forEach(e =&gt; e.addEventListener(
  &quot;mouseenter&quot;,
  (event) =&gt; {
 getCells(event).forEach(child =&gt; child.classList.add(&#39;heightAuto&#39;))
  },
  false
));

span.forEach(e =&gt; e.addEventListener(
  &quot;mouseout&quot;,
  (event) =&gt; {
getCells(event).forEach(child =&gt; child.classList.remove(&#39;heightAuto&#39;))
  },
  false
));

table {
  border-collapse: collapse;
}

td&gt;span {
  border: 1px solid black;
  padding: 5px;
  overflow: hidden; 
  transition: all 1s ease-in-out; 
  max-height: 60px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heightAuto {
  max-height: 1000px !important;
}

    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

表格中的最大高度过渡

问题

答案1

如何修复水平滚动时图像之间间距过大。

ReactJS: JavaScript "Map" function says "is not a function" when trying to iterate on a "useState" array of objects

如何在登录信息不在本地存储中时重定向页面？

更新按钮点击时的 href 并下载文件。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论