Expand childElement with its content

[MikeDabrowski]

I am using this transitions to switch pages with text. Text will be generated so it will have various height. Overflow is set to hidden so if my text page is longer it just disappears. I'd like to allow expanding to match content height. I must admit I modified this react-transitions slightly but my mods are not causing this issue. The biggest problem is position absolute. Element with such position acts differently in webpage flow. Also disabling it causes animations to act weird: mid transition two pages with text are visible which looks bad.

tParent and tChild are custom names for classes generated by react-transitions

My current html part:

<div class="overParent">
<div class="tParent">
<div class="tChild">
<div class="Page"></div></div></div></div>

Relevant css:

.overParent{
    width: 600px;
    margin: 0 auto;
    height: auto;
    clear: both;

}
.tParent{
    perspective: 1200px;
    position: relative;
    overflow: hidden;
    min-height: 580px;
    width: 600px;
    margin: 0 auto;
    left:0;
    top: 0;
    right: 0;
    float:left;
}
.tChild{
    position: absolute;
    display: inline-block;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transformStyle: preserve-3d;
    backfaceVisibility: hidden;
    height: auto;
    left:0;
    top: 0;
    right:0;
    float: left;
}
.Page{
    width: 600px;
    padding: 0px;
}

I need that because I want to add footer below this transition. Here is the link to my latest efforts on setting it up.

[szchenghuang]

The dimension is intentionally made fixed for every transition to be supported out of the box. Most of the transitions rely on a fixed bounding box. Contents outside of the box is overflow: hidden, making that animation fancy. Without a fixed bounding box, some transitions will be broken.

In the case of dynamic height for a seamless footer on the bottom, some transitions will not fit since they require fixed height. Yet there could be some improvement given to relax the restriction, by providing an option to customize the default style, it would be essentially equivalent to tuning the source.

[MikeDabrowski]

I already figured that out. I tried balancing positions , using float , using flex but it didn't work. Do you have any idea how to modify this to work?

[MikeDabrowski]

OK try this: (I renamed child class tChild) add this to component which has higher content than previously set app height:

componentDidMount() {
        var componentHeight = $('.tChild').height();
        var currentHeight = document.documentElement.style.getPropertyCSSValue('--app-height');
        if(componentHeight>currentHeight) {
            document.documentElement.style.setProperty(`--app-height`, componentHeight + 20 + 'px', "important");
        }
    })

This way when component is longer js will expand app height.

[szchenghuang]

I see it as setting the wrapper height dynamically based on the fetched height of the content.

[MikeDabrowski]

Exactly. Position absolute is taken out of normal flow of website. So if it has to stay this was the only way to fix that.

[szchenghuang]

Some CSS properties can indeed be ignored for limited animations. Tune them as you need to.

I believe most of the time only a selection of animations are actually in use. I am considering to give an option which when present overrides the default style of the wrapper for flexibility.

Thanks for this feedback!