Angular 4下拉列表无法使用动画

时间：2018-02-06 12:32:02

标签： html css angular angular-animations

HTML 的

<div class="wrapper">
  <nav id="sidebar">
    <div class="sidebar-header">
      <h3>BackOffice</h3>
      <strong>BO</strong>
    </div>
    <ul class="list-unstyled components">
      <!-- <li class="active" -->
        <li>

        <a (click)="toggle()" href="javascript:void(0)">  
        <i class="glyphicon glyphicon-home "></i>
        DASHBOARD <i class="fa fa-caret-down"></i>
        </a>
        <div  *ngIf= show [@popOverState]="stateName"> 
          <ul class= "list-unstyled " id="homeSubmenu ">
            <li><a href="javascript:void(0)">Dashboard</a></li>
          </ul>
         </div> 
      </li>

      <li>
        <a (click)="toggle()" href="javascript:void(0)" aria-expanded="false">
        <i class="glyphicon glyphicon-duplicate "></i>
        CUSTOMERS
        </a>
        <div   [@popOverState]="stateName">
          <ul class=" list-unstyled " id="customersSubmenu ">
            <li><a href="javascript:void(0)">Customers Information</a></li>
            <li><a href="javascript:void(0)">Incomplete Registrations</a></li>
            <li><a href="javascript:void(0)">Locked Accounts</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a (click)="toggle()" href="javascript:void(0)">
        <i class="glyphicon glyphicon-link "></i>
        FX
        </a>
        <div   [@popOverState]="stateName">
        <ul class="list-unstyled " id="fxSubmenu ">
          <li><a href="javascript:void(0)">CustomerQuotes</a></li>
          <li><a href="javascript:void(0)">Transactions</a></li>
          <li><a href="javascript:void(0)">Forwards</a></li>
          <li><a href="javascript:void(0)">Limit Orders</a></li>
          <li><a href="javascript:void(0)">Trading</a></li>
          <li><a href="javascript:void(0)">Rates Matrix</a></li>
          <li><a href="javascript:void(0)">Settlements</a></li>
        </ul>
      </div>
      </li>
      <li>
        <a (click)="toggle()" href="javascript:void(0)">
        <i class="glyphicon glyphicon-paperclip "></i>
        SETTLEMENTS
        </a>
        <div   [@popOverState]="stateName">
        <ul class="list-unstyled" id="settlementsSubmenu ">
          <li><a href="javascript:void(0)">Daily Processes</a></li>
          <li><a href="javascript:void(0)">CP Statements</a></li>
          <li><a href="javascript:void(0)">Currency Accounts</a></li>
          <li><a href="javascript:void(0)">Overdues</a></li>
          <li><a href="javascrip[t:void(0)">Direct Debits</a></li>
          <li><a href="javascript:void(0)">Unprocessed Direct Debits</a></li>
          <li><a href="javascript:void(0)">Open Payments</a></li>
          <li><a href="javascript:void(0)">Forward Revaluations</a></li>
          <li><a href="javascript:void(0)">Recipient Payments</a></li>
          <li><a href="javascript:void(0)">Counter Party Payments</a></li>
          <li><a href="javascript:void(0)">Cash Payment</a></li>
          <li><a href="javascript:void(0)">Recipients</a></li>
          <li><a href="javascript:void(0)">Cancellations</a></li>
          <li><a href="javascript:void(0)">Loans</a></li>
          <li><a href="javascript:void(0)">Currency Cloud</a></li>
        </ul>
        </div>
      </li>
      <li>
        <a (click)="toggle()"  href="javascript:void(0)">
        <i class="glyphicon glyphicon-send "></i>
        COMPLIANCE
        </a>
        <div [@popOverState]="stateName">
        <ul class= "list-unstyled" id="complianceSubmenu ">
          <li><a href="javascript:void(0)">Customer Applications</a></li>
          <li><a href="javascript:void(0)">PEP And Sanctions</a></li>
          <li><a href="javascript:void(0)">Sanctions Matches</a></li>
          <li><a href="javascript:void(0)">Transaction Alerts</a></li>
          <li><a href="javascript:void(0)">Limit Requests</a></li>
          <li><a href="javascript:void(0)">DD Approvals</a></li>
          <li><a href="javascript:void(0)">Documents</a></li>
          <li><a href="javascript:void(0)">Risk Scoring</a></li>
          <li><a href="javascript:void(0)">Transaction Monitoring Settings</a></li>
          <li><a href="javascript:void(0)">Sanction Recipients</a></li>
          <li><a href="javascript:void(0)">TA Recipients</a></li>
          <li><a href="javascript:void(0)">Negative List</a></li>
          <li><a href="javascript:void(0)">Negative List Removal</a></li>
          <li><a href="javascript:void(0)">Disabled Accounts</a></li>
          <li><a href="javascript:void(0)">Closed Accounts</a></li>
          <li><a href="javascript:void(0)">Declined Accounts</a></li>
          <li><a href="javascript:void(0)">OTP Locked</a></li>
        </ul>
      </div>
      </li>
      <li>
        <a (click)="toggle()" href="javascript:void(0)">
        <i class="glyphicon glyphicon-send "></i>
        REPORTING
        </a>
        <div [@popOverState]="stateName">
        <ul class="list-unstyled " id="reportingSubmenu ">
          <li><a (click)="toggle()" href="javascript:void(0)">BPNG Reports</a>
            <div [@popOverState]="stateName">
            <ul class="list-unstyled" id="reportingSubmenu ">
              <li><a href="javascript:void(0)">Reporting Matrix</a></li>
              <li><a href="javascript:void(0)">Clients Reports Due</a></li>
              <li><a href="javascript:void(0)">Bank Reports</a></li>
              <li><a href="javascript:void(0)">Reporting Settings</a></li>
            </ul>
            </div>      
          </li>
        </ul>
      </div>
        <div   [@popOverState]="stateName">
        <ul class="list-unstyled" id="reportingSubmenu ">
          <li><a (click)="toggle()" href="javascript:void(0)">Reporting</a>
            <div  [@popOverState]="stateName">
            <ul class="list-unstyled" id="reportingSubmenu">
              <li><a href="javascript:void(0)">Reports</a></li>
              <li><a href="javascript:void(0)">IFTI Reports</a></li>
              <li><a href="javascript:void(0)">Company Funds</a></li>
            </ul>
          </div>
          </li>
        </ul>
      </div>
      </li>
      <li>
        <a (click)="toggle()" href="javascript:void(0)">
        <i class="glyphicon glyphicon-paperclip "></i>
        USERS
        </a>
        <div [@popOverState]="stateName">
        <ul class="list-unstyled" id="usersSubmenu">
          <li><a href="javascript:void(0)">Information</a></li>
          <li><a href="javascript:void(0)">Pending</a></li>
          <li><a href="javascript:void(0)">Permissions</a></li>
        </ul>
      </div> 
      </li>
      <li>
        <a (click)="toggle()" href="javascript:void(0)">
        <i class="glyphicon glyphicon-paperclip "></i>
        PREFERENCES
        </a>
        <div [@popOverState]="stateName">
        <ul class="list-unstyled " id="preferencesSubmenu ">
          <li><a href="javascript:void(0)">Integrations</a></li>
          <li><a href="javascript:void(0)">Application Preferences</a></li>
          <li><a href="javascript:void(0)">Customization</a></li>
          <li><a href="javascript:void(0)">Payment Files</a></li>
        </ul>
      </div>
      </li>
      <li>
        <a (click)="toggle()" href="javascript:void(0)">
          <i class="glyphicon glyphicon-send"></i>
          PARTNERS
        </a>
        <div [@popOverState]="stateName">
        <ul class="list-unstyled" id="partnersSubmenu ">
          <li><a (click)="toggle()" href="javascript:void(0)">White Labels</a>
            <div [@popOverState]="stateName">
            <ul class="collapse list-unstyled" id="partnersSubmenu ">
              <li><a href="javascript:void(0)">Information</a></li>
            </ul>
            </div>
          </li>
        </ul>
      </div>
      <div [@popOverState]="stateName">
        <ul class="list-unstyled" id="partnersSubmenu">
          <li><a (click)="toggle()" href="javascript:void(0)">Affiliates</a>
            <div [@popOverState]="stateName">
            <ul class="list-unstyled " id="partnersSubmenu ">
              <li><a href="javascript:void(0)">Information</a></li>
            </ul>
          </div>
          </li>
        </ul>
      </div>
    </ul>
  </nav>
</div>
<div id="content">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
          <i class="glyphicon glyphicon-align-left"></i>
          <span>Toggle Sidebar</span>
        </button>
      </div>
    </div>
  </nav>
</div>

CSS 

/*
    DEMO STYLE
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";  */

body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
    height: 100%;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}



i, span {
    display: inline-block;
}

---------------------------------------------------
    SIDEBAR STYLE
-----------------------------------------------------
.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    height: 100%;
    min-width: 250px;
    max-width: 250px;
    background: black;
    color: #fff;
    top:0;
    left:0;   
    transition: all 0.3s;
}

#sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}


#sidebar.active .sidebar-header strong {
    display: block;
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;
}

#sidebar.active ul li a i {
    margin-right:  0;
    display: block;
    font-size: 1.8em;
    margin-bottom: 5px;
}

#sidebar.active ul ul a {
    padding: 10px !important;
}

#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
    top: auto;
    bottom: 5px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#sidebar .sidebar-header {
    padding: 20px;
    background: grey;
}

#sidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
}

#sidebar ul.components {
    padding: 20px 0;
   border-bottom: 1px solid #47748b;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.5em;
    display: block;
}
#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}
#sidebar ul li a i {
    margin-right: 10px;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: grey;
}


a[data-toggle="collapse"] {
    position: relative;
}

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
} 
 a[aria-expanded="true"]::before {
    content: '\e260';
}


ul ul a {
    font-size: 1.5em !important;         /*sub-menu items size */
    padding-left: 30px !important;
    background: #6d7fcc;
}



a.article, a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}


.fa-caret-down {
    float: right;
    padding-right: 8px;
}

ts file 

@Component({
  selector: 'sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css'],
  animations: [
    trigger('popOverState', [
    state('show', style({
      opacity: 1
    })),

    state('hide', style({
      opacity: 0
    })),

    transition('show => hide', animate('1000ms ease-out')),
    transition('hide => show', animate('1000ms ease-in'))
      ])
    ]
      })


export class SideBarComponent implements OnInit {

  show = false;

  constructor() {}

  ngOnInit() {

  }

  get stateName() {
    return this.show ? 'show' : 'hide'
  }


toggle() {
  this.show = !this.show;
}

}

描述：现在我得到一个带有下拉动画的侧边栏，但是即使没有点击动画也没有空间（填充）。我想删除这个空间。 此外，在点击DASHBOARD时，会显示每个下拉内容（即使点击DASHBOARD CUSTOMERS内容也会在点击事件中显示。如何使状态彼此独立。即，只需单击该特定动画就必须可见。

有人可以帮我解决这个问题。

1 个答案:

答案 0 :(得分：0)

1）首先，要删除空格，只需将<ul>标记的填充设置为0：

ul {
  list-style-type: none;
  padding: 0;
}

2）然后，要为特定div设置动画，您可以执行以下操作：

  • 将div名称作为toggle（）函数的参数
  • 使用（@ popOverState.done）=“animationDone（）”可以在动画结束后切换动画状态
  • 使用* ngIf =“divName ==='divA'”仅显示您想要查看的div

<强> app.component.html 

<div class="wrapper">
    <nav id="sidebar">
        <div class="sidebar-header">
            <h3>BackOffice</h3>
            <strong>BO</strong>
        </div>
        <ul class="list-unstyled components">
            <li class="active">
                <a (click)="toggle('divA')" href="javascript:void(0)">DASHBOARD</a>
                <div *ngIf="divName==='divA'" [@popOverState]="stateName" (@popOverState.done)="animationDone()">
                    <ul class="list-unstyled " id="homeSubmenu ">
                        <li>
                            <a href="javascript:void(0)">Dashboard</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a (click)="toggle('divB')" href="javascript:void(0)" aria-expanded="false">CUSTOMERS</a>
                <div *ngIf="divName==='divB'"  [@popOverState]="stateName" (@popOverState.done)="animationDone()">
                    <ul class=" list-unstyled " id="customersSubmenu ">
                        <li>
                            <a href="javascript:void(0)">Customers Information</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Incomplete Registrations</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Locked Accounts</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</div>

<强> app.component.ts 

export class AppComponent {
  name = 'Angular 5';
  show = true;
  divName = '';
  count = 0;

  constructor() { }

  get stateName() {
    return this.show ? 'show' : 'hide'
  }

  animationDone() {
    this.count++;
    if(this.count<2) {
      this.show = !this.show;
    }
  }



 toggle(myDiv) {
    this.count = 0;
    this.show = !this.show;
    if (this.divName === myDiv) {
      this.divName = '';
    } else {
      this.divName = myDiv;
    }
  }
}

Here is a StackBlitz example

相关问题
最新问题