All geek questions in one place

How can I “pinch” an element containing text smoothly?

What am i trying to do

My goal is to list the list so that when you click on an element, it smoothly rises to the top of the list, becoming a heading (see example). Actually, under it the user interface of the menu will be displayed. I can move the height of all the elements except one click to smoothly animate it to the top of the list. It works! But the text, when the container gets too small, the text, of course, just disappears. My intention is for the text to be pinched too.

What i tried

So, of course, I have to use conversion. However, the transformation visually visualizes the container, but does not physically change the space in which it lives, so the item with the list pressed does not rise up.

Finally, when I try to convert the container at the same time and change its height to zero, the result is not as expected. The change in height is taken into account as a result of the transformation, and the text still just disappears.

In addition, gaps arise between the elements, since the transformation actually takes into account the change in height, which makes them visually faster than their size can be reduced!

My question

How can I simultaneously transform the container and physically reduce its height to zero in a smooth, fluent , without text disappearing at any point until it becomes pinched . zero height (and without gaps between average transitions of elements)?

Example:

//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>
+5
source share
2 answers

Perhaps what you were looking for? This is a combination of overflow: visible with your conversion.

I slowed it down a bit to show the animation more clearly.

EDIT: The clearance problem was resolved by changing the top and bottom margins rather than the height — since changing the height made the scale transformation even smaller than it was.

 //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>
+1
source

Try using .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>
0
source

Source: https://habr.com/ru/post/1232764/

More articles:


All Articles