Angular 2 and displaying css transitions: none

I am implementing a tab stop view (yes, different!) With Angular and Bootstrap 3 CSS.

I want to only use inline CSS transitions without using Angular animation module. This way I can / want to reuse the 3dh piece of CSS (Bootstrap in this case).

I don't want to use other third part software like ngBootstrap: only Angular template and dynamic change class for fading between tabs.

After more and more resources and tests, I noticed that if the CSS style is set to "none", with pure HTML, the transitions work correctly. Same CSS but using Angular 2 the transition doesn't work .

This is another use case for ngIf use because the div is present in the DOM but not visible and witohut uses a space. This is a very important condition!

This is another use case for this StackOverflow question.

because there is a working example with pure HTML like this http://pgsfredda.webfactional.com/spa-ang/#/ui-tabs

You can see a working example of a CSS tab using both opacity and CSS display options.

Boot version: 3.3.7 Angular version: 4.0.1

Styles (in bootstrap.min.css file):

.tab-content>.active {
    display: block;
}

.tab-content>.tab-pane {
    display: none;
}

.fade.in {
    opacity: 1;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

      

        
        
        
      

    

Angular Component Template Instance:

<ul class="{{item.tabNavClass}}">
   <ng-template ngFor let-tab [ngForOf]="item.controls">
      <pg-form-control [item]="tab.header (pgOnChange)="onHeaderChange($event)">
      </pg-form-control>
   </ng-template>
</ul>

<div class="{{item.tabContentClass}}">

   <ng-template ngFor let-tab [ngForOf]="item.controls">
      <div [ngClass]="getTabContainerClass(tab)">
         <pg-form-group [item]="tab"></pg-form-group>
      </div>
   </ng-template>

</div>

      

        
        
        
      

    

Angular component function for changing classes:

onHeaderChange(event: pgObjectsCmdStdOnChange) {
        let tab: pgFormTabviewHeader = (<pgFormTabviewPanel>(this.item.controls[event.params.value])).header;

        if(tab.disabled) {
            event.params.event.preventDefault();
            return;
        }

        if(!tab.selected) {
            this.toggleSelectedTab();
            tab.selected = true;
        }
    }

getTabContainerClass(tab) {
            return tab.tabContainerClass + (tab.header.selected? ' ' + tab.activeClass : '');
        }

toggleSelectedTab() {
    let tab = <pgFormTabviewPanel>this.item.controls.find(t => (t instanceof pgFormTabviewPanel? t.header.selected : false));

    if(tab) tab.header.selected = false;
}

      

        
        
        
      

    

where the property values ​​are:

tab.tabContainerClass = 'tab-pane fade'
tab.tab.activeClass = 'in active'

      

        
        
        
      

    

These values ​​are dynamically changed using the tab.header.selected value.

I'm sorry if this could be a simple use case. Thank you in advance for your help!