But what about the surrounding content? Since we are no longer adjusting layout the surrounding content is not afflicted by the changes. You can see a live example here in vanilla JS.Īt this point, our background has been properly scaled to create the illusion of height. Then again to apply the scale to the background div so that it will perform the transformation. Once to get the height of the inner container to calculate the scale. In vanilla javascript, this means some trickery with dual renders.Then we set the background to scaleY by the new amount. Here’s the trick: Once we toggle an event that changes the markup we take the new height of the inner container and calculate the amount that the background needs to scale in order to accommodate the new height.The inner container contains the markup and will change its height according to the content it contains. This is our background, and will be scaled once we toggle the transformation. Inside the outer container we have another div that is absolutely positioned to span the entire width and height of the div.This will cause any changing content to overflow the container instead expanding its parent. Then we set the outer container height to be explicit to this height. First we need to get the initial height of the element container. The way we will use to achieve performant animation of height is actually by faking it with transform: scaleY. We can not simply apply a simple property to an element and be done. Since transforms have no way of influencing height. Instead I needed to get creative with other CSS properties that does not incur those costs. The question I asked myself was how I could avoid the performance cost that is incurred by animating height.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |