Question

在我的应用程序中，我想在点击箭头时滚动到下一部分。

参考website

在上述网站中，如果您点击箭头，则会执行transform:translate3d(a,b,c)以转到下一部分，其中只有'b'值会发生变化。

注意：我当前的视口高度是949px;这是我在动态计算

我在我的申请中尝试了以下内容：

 moveToNextSection() {

    $('.bfs-scroll-container').animate({
      'opacity': '949'
  }, {
      step: function (now, fx) {
          $(this).css({'transform': 'translate3d(0px, -' + now + 'px, 0px)'});
      },
      duration: 1000,
      easing: 'linear',
  }, 'linear');

  }

工作正常;但我想采用棱角分明的方法。没有遗憾。

我在下面尝试使用Observable：

  moveToNextSection() {
     const sectionScrollTop = this.document.documentElement.clientHeight; //949
     //const interval = sectionScrollTop / 1000;
     Observable.interval(1).subscribe((val) => {
       console.log(val);
       this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,-${val}px,0px)`);
    });

}

这是有效但非常缓慢且错误的方法。

此外，我不确定如何使用@angular/animations实现此动态动画。

注意：上面提到的网站有一些不同的HTML布局;我们必须完全一样。所以我不想使用window.scrollTo()。想要实现类似的动画移动到上一个网站正在做的下一部分。

请建议我如何在Angular中实现这一目标。

Answer 1

我使用渲染器2提出了以下解决方案：

HTML：

 <div class="bfs-scroll-container" #scrollMe>
      <app-about-company></app-about-company>
      <app-about-bfs></app-about-bfs>
 </div>

打字稿：

    import { Observable } from 'rxjs/Observable';
    import { Component, Inject, ViewChild, ElementRef, Renderer2, OnInit, HostListener } from '@angular/core';
    import { DOCUMENT } from '@angular/common';

    @Component({
      selector: 'app-main',
      templateUrl: './main.component.html',
      styleUrls: ['./main.component.scss']
    })
    export class MainComponent implements OnInit {

      @ViewChild('scrollMe') scrollMe: ElementRef;
      @ViewChild('scrollTop') scrollTop: ElementRef;

      constructor(@Inject(DOCUMENT) private document: any, private renderer: Renderer2) {

      }

      ngOnInit() {
      }

      moveToNextSection() {
              const elementLength = this.scrollMe.nativeElement.children.length;

               const elementTopPosition = this.scrollMe.nativeElement.children[this.index].offsetTop;  //pass index of your child component where you want to scroll to instrad of this.index
               this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,-${elementTopPosition}px,0px)`);
               this.renderer.setStyle(this.scrollTop.nativeElement, 'opacity', `1`);
       }

 }

在角度4中实现动态动画，以便在单击时移动到下一部分

1 个答案: