Angular-анимация внешнего вида конкурса слева направо со следующим эффектом на виде - PullRequest
Новая
       11

Angular-анимация внешнего вида конкурса слева направо со следующим эффектом на виде

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

Я начал изучать угловую анимацию. но у меня есть очень интересный эффект появления изображения. Вы можете видеть его на видео https://youtu.be/iqa4R8PE6zo.

Я не могу понять, какие стили между состояниями нужно указывать. Можете ли вы помочь мне с этой реализацией

Обновлено

HTML 

<img [@openClose]="openClose" class="myblock" src="../../../../assets/images/Beat_create_2.jpeg" />

scss 

.myblock{
width: 500px;
height: 700px;
margin: 5rem;

}

Компонент 

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-creating-pulse',
  templateUrl: './creating-pulse.component.html',
  styleUrls: ['./creating-pulse.component.scss'],
  animations: [
    trigger('openClose', [
      state('open', style({
        // what property of css add?
        opacity: '0',
      })),
      state('closed', style({
        // what property of css add?
        opacity: '1'
      })),
      transition('* => closed', animate('4s')
      ),
    ]),
  ],
})
export class CreatingPulseComponent implements OnInit {
  openClose = 'open';

  constructor() { }

  ngOnInit() {
    this.openClose = 'closed';
  }

}
...