英文:
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中进行的操作,已经翻译成中文。如果您有其他问题或需要更多帮助,请随时提出。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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
));
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<!-- 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
以下是翻译好的部分:
你不能过渡到或从`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.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
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
));
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论