表格中的最大高度过渡

huangapple go评论93阅读模式
英文:

Max-height transition in table

问题

以下是代码部分的翻译:

  1. const span = document.querySelectorAll('td>span')
  2. const getCells = td => td.target.closest('tr').querySelectorAll('td>span')
  3. span.forEach(e => e.addEventListener(
  4. "mouseenter",
  5. (event) => {
  6. getCells(event).forEach(child => child.classList.add('heightAuto'))
  7. },
  8. false
  9. ));
  10. span.forEach(e => e.addEventListener(
  11. "mouseout",
  12. (event) => {
  13. getCells(event).forEach(child => child.classList.remove('heightAuto'))
  14. },
  15. false
  16. ));
  1. table {
  2. border-collapse: collapse;
  3. }
  4. td>span {
  5. border: 1px solid black;
  6. padding: 5px;
  7. overflow: hidden;
  8. transition: all 1s ease-in-out;
  9. max-height: 60px;
  10. display: -webkit-box;
  11. overflow: hidden;
  12. text-overflow: ellipsis;
  13. }
  14. .heightAuto {
  15. max-height: none !important;
  16. }
  1. <table>
  2. <tr>
  3. <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>
  4. <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>
  5. <!-- 其他行类似 -->
  6. </tr>
  7. <!-- 其他行类似 -->
  8. </table>

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

英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const span = document.querySelectorAll(&#39;td&gt;span&#39;)
  2. const getCells = td =&gt; td.target.closest(&#39;tr&#39;).querySelectorAll(&#39;td&gt;span&#39;)
  3. span.forEach(e =&gt; e.addEventListener(
  4. &quot;mouseenter&quot;,
  5. (event) =&gt; {
  6. getCells(event).forEach(child =&gt; child.classList.add(&#39;heightAuto&#39;))
  7. },
  8. false
  9. ));
  10. span.forEach(e =&gt; e.addEventListener(
  11. &quot;mouseout&quot;,
  12. (event) =&gt; {
  13. getCells(event).forEach(child =&gt; child.classList.remove(&#39;heightAuto&#39;))
  14. },
  15. false
  16. ));

<!-- language: lang-css -->

  1. table {
  2. border-collapse: collapse;
  3. }
  4. td&gt;span {
  5. border: 1px solid black;
  6. padding: 5px;
  7. overflow: hidden;
  8. transition: all 1s ease-in-out;
  9. max-height: 60px;
  10. display: -webkit-box;
  11. overflow: hidden;
  12. text-overflow: ellipsis;
  13. }
  14. .heightAuto {
  15. max-height: none !important;
  16. }

<!-- language: lang-html -->

  1. &lt;table&gt;
  2. &lt;tr&gt;
  3. &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;
  4. &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;
  5. &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;
  6. &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;
  7. &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;
  8. &lt;/tr&gt;
  9. &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;
  10. &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;
  11. &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;
  12. &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;
  13. &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;
  14. &lt;/tr&gt;
  15. &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;
  16. &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;
  17. &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;
  18. &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;
  19. &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;
  20. &lt;/tr&gt;
  21. &lt;/table&gt;

<!-- end snippet -->

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

以下是翻译好的部分:

  1. 你不能过渡到或从`none``auto`这样的值;相反,你可以只过渡到一个非常大的数字。在下面的示例中,我使用了1000px,但你可以使用任何你喜欢的数字。
  2. const span = document.querySelectorAll('td>span')
  3. const getCells = td => td.target.closest('tr').querySelectorAll('td>span')
  4. span.forEach(e => e.addEventListener(
  5. "mouseenter",
  6. (event) => {
  7. getCells(event).forEach(child => child.classList.add('heightAuto'))
  8. },
  9. false
  10. ));
  11. span.forEach(e => e.addEventListener(
  12. "mouseout",
  13. (event) => {
  14. getCells(event).forEach(child => child.classList.remove('heightAuto'))
  15. },
  16. false
  17. ));
  18. table {
  19. border-collapse: collapse;
  20. }
  21. td>span {
  22. border: 1px solid black;
  23. padding: 5px;
  24. overflow: hidden;
  25. transition: all 1s ease-in-out;
  26. max-height: 60px;
  27. display: -webkit-box;
  28. overflow: hidden;
  29. text-overflow: ellipsis;
  30. }
  31. .heightAuto {
  32. max-height: 1000px !important;
  33. }
  34. <table>
  35. <tr>
  36. <td><span>...</span></td>
  37. <td><span>...</span></td>
  38. <td><span>...</span></td>
  39. <td><span>...</span></td>
  40. <td><span>...</span></td>
  41. </tr>
  42. <tr>
  43. <td><span>...</span></td>
  44. <td><span>...</span></td>
  45. <td><span>...</span></td>
  46. <td><span>...</span></td>
  47. <td><span>...</span></td>
  48. </tr>
  49. ...
  50. </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.

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

  1. const span = document.querySelectorAll(&#39;td&gt;span&#39;)
  2. const getCells = td =&gt; td.target.closest(&#39;tr&#39;).querySelectorAll(&#39;td&gt;span&#39;)
  3. span.forEach(e =&gt; e.addEventListener(
  4. &quot;mouseenter&quot;,
  5. (event) =&gt; {
  6. getCells(event).forEach(child =&gt; child.classList.add(&#39;heightAuto&#39;))
  7. },
  8. false
  9. ));
  10. span.forEach(e =&gt; e.addEventListener(
  11. &quot;mouseout&quot;,
  12. (event) =&gt; {
  13. getCells(event).forEach(child =&gt; child.classList.remove(&#39;heightAuto&#39;))
  14. },
  15. false
  16. ));

<!-- language: lang-css -->

  1. table {
  2. border-collapse: collapse;
  3. }
  4. td&gt;span {
  5. border: 1px solid black;
  6. padding: 5px;
  7. overflow: hidden;
  8. transition: all 1s ease-in-out;
  9. max-height: 60px;
  10. display: -webkit-box;
  11. overflow: hidden;
  12. text-overflow: ellipsis;
  13. }
  14. .heightAuto {
  15. max-height: 1000px !important;
  16. }

<!-- language: lang-html -->

  1. &lt;table&gt;
  2. &lt;tr&gt;
  3. &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;
  4. &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;
  5. &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;
  6. &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;
  7. &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;
  8. &lt;/tr&gt;
  9. &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;
  10. &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;
  11. &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;
  12. &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;
  13. &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;
  14. &lt;/tr&gt;
  15. &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;
  16. &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;
  17. &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;
  18. &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;
  19. &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;
  20. &lt;/tr&gt;
  21. &lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月21日 00:48:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/75793088.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定