Question

我有一个住所和登记处。在家庭组件中，分页在最右侧从顶部到底部浮动，在右侧是注册按钮。背景颜色为黄色。

在单击注册按钮时，home组件应向左移动，直到到达页面中间，并且页面的最右边部分是黑色（即黄色区域之后）。

同时，新的寄存器页面数据在黄色部分和黑色部分中从底部导航到顶部，但是分页区域始终停留在黄色区域的最左侧。寄存器组件完全加载后，分页应将选择从1更改为2。

我是第一次做角度动画。目前，我不知道如何启动它。请提出一个提示，以便我可以处理

Answer 1

您可以在此处参考文档：https://angular.io/api/animations/transition

在这里您可以看到一些很棒的例子：https://www.youtube.com/watch?v=ra5qNKNc95U

从右侧滑入/滑出的基本示例：

// In .ts file.
@Component({
  selector: 'app-alarm',
  templateUrl: './alarm.component.html',
  styleUrls: ['./alarm.component.css'],
  animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)'
      })),
      state('out', style({
        transform: 'translate3d(100%, 0, 0)'
      })),
      transition('in => out', animate('400ms ease-in-out')),
      transition('out => in', animate('400ms ease-in-out'))
    ]),
  ]
})
public menuState = 'out';



 toggleMenu() {

    if (!this.isOpened) {
      this.isOpened = true;
    } else {
      setTimeout(() => {
        this.isOpened = false;
      }, 500);

    }
    this.menuState = this.menuState === 'out' ? 'in' : 'out';
  }


// In html code.

<div class="side-bar " [@slideInOut]="menuState">
            <div class="btn-filter">
                <ul class="filter-panel" (click)="toggleMenu()" style=" left: -55px;">
                    <li *ngIf="menuState === 'out'"> <span class="glyphicon glyphicon-filter" aria-hidden="true"></span></li>
                    <li *ngIf="menuState !== 'out'"> <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></li>
                    <li *ngIf="menuState === 'out'"> <span>Filters</span></li>
                    <li *ngIf="menuState !== 'out'"> <span>Close</span></li>
                </ul>
            </div>
            <div class="portlet light  stats custom-portlet">
                <div class="portlet-title custom-title">
                    <div class="row">
                        <div class="col-lg-9">

                            <div class="caption">
                                <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
                                <span>Filters</span>
                            </div>

                        </div>
                        <div class="col-lg-3">
                            <span class="glyphicon glyphicon-remove-circle close-icon" aria-hidden="true" (click)="toggleMenu()"></span>
                        </div>
                    </div>
                </div>

            </div>
            <div style="padding:20px;">
                <form [formGroup]="filterForm">
                    <div class="form-group row">
                        <div class="col-lg-12 col-sm-11">
                            <label>Time Interval</label>
                            <input [selectMode]="'range'" [owlDateTimeTrigger]="dtPicker3" [owlDateTime]="dtPicker3"
                                class="form-control" formControlName="time_interval">
                            <owl-date-time #dtPicker3></owl-date-time>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-12 col-sm-11">
                            <label>Device Type</label>
                            <select class="form-control" formControlName="device_type" (change)="generateAlarmType($event.target.value)">
                                <option value="" [selected]="true">Select Device Type</option>
                                <option value="AP">AP</option>
                                <option value="Client">Client</option>
                                <option value="EMS">EMS</option>
                                <option value="WLC">WLC</option>

                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-12 col-sm-11">
                            <label>Alarm Type</label>
                            <select class="form-control" formControlName="alarm_type">
                                <option value="" [selected]="true">Select Alarm Type</option>
                                <option *ngFor="let i of alarmtype" value="{{i.value}}">{{i.type}}</option>
                            </select>
                        </div>
                    </div>



                    <!-- <div class="form-group row">
                     <div class="col-lg-12 col-sm-11">
                         <label>Status</label>
                         <select class="form-control" formControlName="status">
                             <option>Read</option>
                             <option>Unread</option>
                         </select>
                     </div>
                 </div> -->
                    <div class="form-group row">
                        <div class="col-lg-12 col-sm-11">
                            <label>Select severity Level</label>
                            <select class="form-control" formControlName="severity_level">
                                <option value="">Select severity Level</option>
                                <option value="Minor">MINOR</option>
                                <option value="Major">MAJOR</option>
                                <option value="Critical">CRITICAL</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-lg-12 col-sm-11 text-center">
                            <input type="button" value="Cancel" class="btn btn-cancel btn-large" (click)="reset()"
                                style="margin-right: 15px;">
                            <input type="button" value="Search" class="btn btn-theme btn-large" (click)="filter()">
                        </div>
                    </div>
                </form>
            </div>

        </div>

动画角度页面

1 个答案: