如何平滑地“夹住”包含文本的元素？

Question

我想做什么

我的目标是转换一个列表，以便在单击某个项目时，它会平滑地上升到列表顶部，成为标题（参见示例）。 实际上，菜单UI会出现在它下面。 我可以转换除了单击之外的所有元素的高度，以便将其平滑地设置为列表的顶部。 这样可行！ 但是文本，当容器变得太小时，文本当然就消失了。 我的意图是文本也要捏。

---

我试过的

所以当然我必须使用变换。 但是，变换会在视觉上捏住容器，但不会在物理上改变它所居住的空间，因此单击的列表项不会上升到顶部。

最后，当我尝试同时转换容器并将其高度更改为零时，结果不符合预期。 变换考虑了高度的变化，此时文本仍然只是消失了。

此外，项目之间似乎形成了间隙，因为变换实际上考虑了高度变化，使它们在视觉上变换得比它们的尺寸缩小更快！

---

我的问题

如何同时转换容器并以平滑，流畅的方式将其高度物理降低到零，而文本在任何时候都不会消失，直到它被捏到零高度（并且在转换过程中没有出现间隙）？

---

例：

 //name variables containing JQuery $... $('.container').on('mousedown touchstart', function() { $allContainersExceptThis = $('.container').not(this); if (!this.isSelected) { $allContainersExceptThis.css({ 'transform': 'scaleY(0)' }); $(this).css({ 'background-color': 'orange', 'color': '#FF3300' }); this.isSelected = true; } else { $allContainersExceptThis.css({ 'transform': '' }); $(this).css({ 'background-color': '', 'color': '' }); this.isSelected = false; } }); 

 @import url(https://fonts.googleapis.com/css?family=Lobster); html, body, div { padding: 0; margin: 0; box-sizing: border-box; } .wrapper { margin: 10px; width: 2in; height: 3in; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; font-family: 'Lobster', cursive; border-style: solid; border-width: 1px; border-color: lightgray; } .wrapper > .container { width: 100%; height: 0.6in; display: -ms-flexbox; display: -webkit-flex; display: flex; cursor: pointer; transition: transform 0.3s, background-color 0.3s, color 0.3s; } .wrapper .container:nth-child(even) { background-color: lightgray; } .wrapper .container:hover { background-color: gray; color: white; } .wrapper > .container > .name { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; flex: 1; justify-content: center; pointer-events:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="wrapper"> <div id="containerOne" class="container"> <div class="name">Container One</div> </div> <div id="containerTwo" class="container"> <div class="name">Container Two</div> </div> <div id="containerThree" class="container"> <div class="name">Container Three</div> </div> <div id="containerFour" class="container"> <div class="name">Container Four</div> </div> </div> 

Answer 1

也许你在寻找什么？ 它是overflow: visible的组合overflow: visible变换。

为了更清楚地展示动画，我放慢了它的速度。

编辑：通过改变顶部和底部边距而不是高度来解决间隙问题 - 因为改变高度会使比例变换甚至比它更小。

 //name variables containing JQuery $... $('.container').on('mousedown touchstart', function() { $allContainersExceptThis = $('.container').not(this); if (!this.isSelected) { $allContainersExceptThis.css({ 'transform': 'scaleY(0)', 'margin-top': '-0.3in', 'margin-bottom': '-0.3in' }); $(this).css({ 'background-color': 'orange', 'color': '#FF3300' }); this.isSelected = true; } else { $allContainersExceptThis.css({ 'transform': '', 'margin-top': '', 'margin-bottom': '' }); $(this).css({ 'background-color': '', 'color': '' }); this.isSelected = false; } }); 

 @import url(https://fonts.googleapis.com/css?family=Lobster); html, body, div { padding: 0; margin: 0; box-sizing: border-box; } .wrapper { margin: 10px; width: 2in; height: 3in; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; font-family: 'Lobster', cursive; border-style: solid; border-width: 1px; border-color: lightgray; } .wrapper > .container { width: 100%; height: 0.6in; display: -ms-flexbox; display: -webkit-flex; display: flex; cursor: pointer; transition: transform 3s, background-color 3s, color 3s, margin-top 3s, margin-bottom 3s; background-color: lightpink; } .wrapper .container:nth-child(even) { background-color: lightgray; } .wrapper .container:hover { background-color: gray; color: white; } .wrapper > .container > .name { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; flex: 1; justify-content: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="wrapper"> <div id="containerOne" class="container"> <div class="name">Container One</div> </div> <div id="containerTwo" class="container"> <div class="name">Container Two</div> </div> <div id="containerThree" class="container"> <div class="name">Container Three</div> </div> <div id="containerFour" class="container"> <div class="name">Container Four</div> </div> </div> 

Answer 2

尝试使用.slideUp() .slideDown()

 //name variables containing JQuery $... $('.container').on('mousedown touchstart', function() { $allContainersExceptThis = $('.container').not(this); if (!this.isSelected) { $allContainersExceptThis.slideUp({ duration: 500, done: function() { $(this).css('transform', 'scaleY(0)') } }); $(this).css({ 'background-color': 'orange', 'color': '#FF3300' }); this.isSelected = true; } else { $allContainersExceptThis.slideDown({ duration: 500, start: function() { $(this).css('transform', 'scaleY(1)') } }); $(this).css({ 'background-color': '', 'color': '' }); this.isSelected = false; } }); 

 @import url(https://fonts.googleapis.com/css?family=Lobster); html, body, div { padding: 0; margin: 0; box-sizing: border-box; } .wrapper { margin: 10px; width: 2in; height: 3in; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; font-family: 'Lobster', cursive; border-style: solid; border-width: 1px; border-color: lightgray; } .wrapper > .container { width: 100%; height: 0.6in; display: -ms-flexbox; display: -webkit-flex; display: flex; cursor: pointer; transition: transform 0.3s, background-color 0.3s, color 0.3s; } .wrapper .container:nth-child(even) { background-color: lightgray; } .wrapper .container:hover { background-color: gray; color: white; } .wrapper > .container > .name { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; flex: 1; justify-content: center; pointer-events: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="wrapper"> <div id="containerOne" class="container"> <div class="name">Container One</div> </div> <div id="containerTwo" class="container"> <div class="name">Container Two</div> </div> <div id="containerThree" class="container"> <div class="name">Container Three</div> </div> <div id="containerFour" class="container"> <div class="name">Container Four</div> </div> </div>