angular 2 and css transitions display: none

I'm implementing a tab view (yes, another one!) with Angular and Bootstrap 3 CSS.

I want use only the native CSS transitions without using Angular animation module. In this manner I can/want reuse 3dh part CSS (in this case Bootstrap).

I don't want use other 3rd part software like ngBootstrap: only an angular template and a dynamic changing class for fading between tabs.

After more & more & more reserches and tests, I noticed that if the style in CSS set display to 'none', with pure HTML the transitions works correctly. The same CSS but using angular 2 the transition does not work.

This is a different use case respect ngIf use, because in the DOM the div is present but not visible and witohut using space. This is very important condition!

This is a different use case respect this Stackoverflow question

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

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

Bootstrap version: 3.3.7 Angular version: 4.0.1

The styles are (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;
}

The angular component template extract is:

<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>

The angular component function to change the classes are:

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 value of properties are:

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

Those values changing dynamically with the tab.header.selected value.

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