ngAnimate запрашивает только входящий объект с определенным классом - PullRequest
Новая
       35

ngAnimate запрашивает только входящий объект с определенным классом

0 голосов
/ 11 октября 2019

Я пытаюсь создать слайд-шоу в своем проекте angular6. Я следовал следующему уроку (https://onehungrymind.com/angular-animations-intro/). Я закончил и все работало нормально. Однако я хотел добавить svg с текстом внутри него на левой стороне слайда. Мое вдохновение пришло из этого примера (https://codepen.io/suez/pen/ByvKXE).

В данный момент у меня возникла проблема при нажатии кнопки «Вернуться на один слайд». SVG старого слайда все еще находится внутри нового слайда, в то время как новый SVG находится внутри слайда.

enter image description here

Если вы посмотрите на файл анимации, это результат запроса (". Slide-overlay"). Преобразуйте класс влевооба SVG (старый и новый) сдвигаются влево и все еще видны, потому что они все еще существуют, пока активна анимация 0,7 секунды.

файл анимации file.ts (только предыдущий диаметрчасть) 

transition(':decrement', group([
    query(':enter', [
      style({
        transform: 'translateX(-100%)'
      }),
        animate('0.3s ease-out', style('*'))
    ]),
    query(':leave', [
      animate('0.3s ease-out', style({
        transform: 'translateX(100%)'
      }))
    ]),
    query('.slide-overlay', [
        style({
            transform: 'translateX(-40%)',
            opacity: 0

        }),
        animate('0.7s ease-in', style({
            transform: 'translateX(0%)', opacity: 0.5
        }))
    ]),
    query('.slider-text-area', [
        style({
            opacity: 0,
            transform: 'translateY(-15%)'
        }),
        animate('1s', keyframes([
            style({
                opacity: 0,
                transform: 'translateY(-15%)',
                offset: 0.7
            }),
            style({
                opacity: 1,
                transform: 'translateY(0%)', offset: 1
            })
        ]))
    ])  
]))

HTML-файл 

            <div class="slider">
                <div [@SlideAnimation]="currentIndex">
                    <ng-template ngFor [ngForOf]="slides" let-slide let-i="index">
                        <div *ngIf="isCurrentSlideIndex(i)">
                            <svg class="slide-overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                                <path class="slide-overlay-path" d="M0,0 100,0 400, 405 0,405" />
                            </svg>
                            <div class="slider-text-area">
                                <h2 class="slide-header">SchoolWapps functie</h2>
                                <p class="slide-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>
                                <button type="button" class="sw-btn lime button-get-started" (click)="goToConditions()">
                                    <span>
                                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                        {{l("GetStarted")}}
                                    </span>
                                </button>
                            </div>
                        </div>
                            <img class="slide nonDraggableImage"
                                 [src]="slide.image"
                                 *ngIf="isCurrentSlideIndex(i)">
                    </ng-template>
                </div>
                <button class="arrow prev fa fa-chevron-left" (click)="prevSlide()"></button>
                <button class="arrow next fa fa-chevron-right" (click)="nextSlide()"></button>
                <nav class="nav">
                    <div class="wrapper">
                        <ul class="dots">
                            <li class="dot" *ngFor="let slide of slides; let i = index;">
                                <span [ngClass]="{'active':isCurrentSlideIndex(i)}"
                                      (click)="setCurrentSlideIndex(i);">{{slide.description}}</span>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>

Как мне добиться анимации только на входящем SVG?

...