Раскрывающийся список Angular 4 не работает с использованием анимации
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 файл
@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 ответ
1) Во-первых, чтобы удалить пробел, просто установите отступ в 0 для <ul> тег:
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;
}
}
}