0

Нужно на фон приложения установить background-image. Картинок несколько. Выбрал вариант с использованием TimerObservable. Теперь возникла проблема, что бы сделать плавную анимацию. Возможно знаете иные способы достижения такого эфекта? Или как анимировать.

<div class="slide" [ngStyle]="{'background-image': url }" ></div>


    image: String[] = [
    '../img/food1.jpg',
    '../img/food2.jpg',
    '../img/food3.jpg'
  ];

  subscription: any;
  time: number = 0;
  url: string;      

  ngOnInit() {
    let timer = TimerObservable.create(1000,5000);
    this.subscription = timer.subscribe(t=>{
      this.url =  `url(${this.image[this.time++]})`;          
      this.time > 2 ? this.time = 0 : null;

    })
  }
2
  • чтобы сделать анимацию, надо почитать как angular.io/guide/animations
    – Artsiom
    10 авг 2017 в 13:20
  • @Artsiom читал, но она всё равно работает не корректно.
    – Koro6ok
    10 авг 2017 в 14:48

1 ответ 1

0

Решил проблему добавив еще один div

<div class="shadow" *ngIf="!showDiv" [@flyInOut] [ngStyle]="{'background-image': url }"></div>
<div class="slide" *ngIf="showDiv" [@flyInOut] [ngStyle]="{'background-image': url }" ></div>

Также код анимации

 animations: [
    trigger('flyInOut', [
      transition('void => *', [
        style({transform: 'translateX(-100%)'}),
        animate(2000)
      ]),
      transition('* => void', [
        animate(2000, style({transform: 'translateX(100%)'}))
      ])
    ])
  ]

И код компонента

  image: String[] = [
    '../img/food1.jpg',
    '../img/food2.jpg',
    '../img/food3.jpg'
  ];
  showDiv: boolean = true;
  subscription: any;
  time: number = 0;
  url: string;
  opacity: string;
  ngOnInit() {
    let timer = TimerObservable.create(1000,5000);
    this.subscription = timer.subscribe(t=>{
      this.showDiv = this.showDiv  ? false : true;
      console.log(this.showDiv);
      //this.opacity = `opacity 5s infinite`;
      this.url =  `url(${this.image[this.time++]})`;
      this.time > 2 ? this.time = 0 : null;
    })
  }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.