CODEWITHSUNDEEP
cssangular
Denver Dang
Denver Dang

Reputation: 2615

Calculate height of div with dynamic content for transform animation

I have a container with a fixed start height that only covers the <ul> container (see HTML/JS). If a button/link is pushed this container should expand by adding a class to the container div, and expand to fit the content of the entire container. This can be achieved by using the property height: auto, however, if I want a transition effect, e.g. transition: height 0.2s ease-in the auto property doesn't work. And it should be noted, that the content below the <ul> is dynamic. So it can be much more than what is seen here. So how can I get the height of the container, and input this into the is-active CSS class (I am using Angular)?

HTML/JS:

<div [ngClass]="toggleState ? 'container is-active' : 'container'">

    <ul>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a (click)="toggleState = !toggleState">Item 3</a></li>
    </ul>

    <div class="extra-dynamic-content">Lorem ipsum</div>        

</div>

CSS:

.container {
    height: 100px
}

.container .is-active {
    height: 200px;

Upvotes: 0

Views: 87

Answers (1)

cyberbobjr
cyberbobjr

Reputation: 239

With Viewchild annotation you can get the elementRef of your page, and with the elementRef you can access to the properties in the DOM.

BUT you cannot change the scss / css file of the template, this file is statically compiled. So if you want to change the style of element use ngStyle (or style directly with interpolation).

Upvotes: 0

Related Questions