Html 角度2和css转换显示：无

我正在用Angular和Bootstrap3CSS实现一个选项卡视图（是的，另一个！）

我希望只使用本机CSS转换，而不使用角度动画模块。通过这种方式，我可以/希望重用3dh部分CSS（在本例中为Bootstrap）

我不想使用其他第三方软件，如ngBootstrap：只有一个角度模板和一个动态变化类，用于标签之间的淡入淡出

经过越来越多的研究和测试，我注意到，如果CSS中的样式设置为“无”，那么纯HTML的转换工作正常。相同的CSS，但使用角度2，过渡不起作用

在ngIf使用方面，这是一个不同的用例，因为在DOM中div存在但不可见，并且不使用空格。这是非常重要的条件

这是一个不同的用例

因为有一些纯HTML的工作示例，比如

您可以看到一个使用不透明度和显示CSS参数的CSS选项卡工作示例

引导版本：3.3.7 角度版本：4.0.1

样式是（在bootstrap.min.css文件中）：

角度组件模板提取为：

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

这些值随tab.header.selected值动态更改

---

如果这是一个简单的用例，我很抱歉。提前感谢您的帮助

你解决了这个问题吗？顺便说一句，我不知道我是否理解-你的链接导致angular应用程序在哪里工作，或者这个链接是angularjs？该链接显示了纯html和css的工作用例。但是我用的是Angular 4，我遇到了我描述的问题。谢谢你，马塞尔。

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

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

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