Анимировать угловую страницу

Question

У меня есть дом и зарегистрировать компонент. В домашнем компоненте есть нумерация страниц, плавающая сверху вниз с правой стороны и кнопка регистрации справа. Цвет его фона - желтый.

При нажатии на кнопку регистрации, домашний компонент должен перемещаться влево, пока не достигнет середины страницы, а крайняя правая часть страницы будет черного цвета (то есть после желтой области).

Одновременно с этим новые данные страницы регистра перемещаются снизу вверх в желтой и черной частях, но область нумерации страниц всегда остается в самой левой части желтой области. Когда компонент регистра загружен полностью, нумерация страниц должна изменить выбор с 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>