时间戳

首页 > 解决方案 > 如何获取动画元素的最后位置？

html - 如何获取动画元素的最后位置？

问题描述

我想创建一个超出其自身区域的元素的动画，而这些区域有不同的 css 转换。因此我想创建一个这样的动画：

animations: [
trigger('length', [
  transition(':increment', [
    query(':enter',
      [
        style({ transform: 'OLDPOSITION' }),
        stagger('100ms', animate('1000ms ease-in-out',
          style({ transform: 'translate(0px, 0px, 0px)' })
        ))
      ], { optional: true }),
  ]),

但因此，在将元素添加到新父级之前，我需要元素的旧位置。我正在考虑创建一个位置服务来跟踪我想要移动的所有元素。在多个父元素中移动子元素时，是否有更好的方法来生成动画？

标签： htmlcssangular

解决方案

我想通了。

  1. 您可以在更改将在 DOM 上执行之前检测到更改。（当然！）

  2. 您可以通过例如 id 找到 HTMLElement 并在构造函数中获取自己的 ElementRef

  3. 因此您可以计算偏移量

    从“@angular/core”导入 { ElementRef, Input, OnChanges, SimpleChanges }；
    
    出口接口位置{
      x：数字；
      y：数字；
      变换？：字符串，
    }
    
    导出类 MyComponent 实现 OnChanges {
      @Input() 项目：数组 = 未定义；
    
      构造函数（私有hostElement：ElementRef）{}
    
      ngOnChanges（更改：SimpleChanges）{
        如果（更改。项目）{
          让 newItems = [...changes.items.currentValue];
          if (changes.items.previousValue) {
            让 oldItems = changes.items.previousValue;
            newItems = newItems.filter(item => oldItems.indexOf(item) === -1);
          }
          console.log({ offsets: newItems.map(this.getAnimationOffset.bind(this)) });
        }
      }
    
      getAnimationOffset（标识符：字符串）：位置 | 不明确的 {
        让元素：HTMLInputElement = document.getElementById(identifier);
        如果（元素）{
          让 rect = element.getBoundingClientRect();
          让 hostRect = this.hostElement.nativeElement.getBoundingClientRect();
          返回 {
            x：hostRect.x - rect.x，
            y：hostRect.y - rect.y，
            变换：element.style.transform
          };
        }
      }
    }

推荐阅读