Question

在Angular 2中，如何设置一个元素的动画，使其大小和位置与另一个元素的大小和位置相匹配？目标元素的大小和位置不固定，但可以在运行时变化。附件是使用jQuery的完整示例。作为奖励，我想知道动画是否可以在不使用ElementRef的情况下完成？

Codepen

请参阅Animate element on top of another上的Matthew Banz（@battmanz）的笔CodePen。

HTML

<section>
  <button id="animateBlue">Animate Blue</button>
  <button id="randomizeOrange">Randomize Orange</button>
</section>

<section>
  <div class="ball" id="ball1"></div>
  <div class="ball" id="ball2"></div>
</section>

CSS

body {
  margin: 0;
  padding: 0;
}

section:first-of-type {
  padding: 10px;
  text-align: center;
  background-color: #ccc;
}

.ball {
  border-radius: 50%;
  position: absolute;
}

#ball1 {
  background-color: blue;
  z-index: 5;
}

#ball2 {
  background-color: orange;
}

JS

const ball1 = $('#ball1');
const ball2 = $('#ball2');

function getRandomIntInclusive(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomlyAssignOrangePositionSize() {
  const radius = getRandomIntInclusive(10, 200);
  const top = getRandomIntInclusive(50, 300);
  const left = getRandomIntInclusive(10, 900);

  ball2.css({
    width: radius,
    height: radius,
    top: top,
    left: left
  });
}

ball1.css({
  width: 50,
  height: 50,
  top: 100,
  left: 50
});

randomlyAssignOrangePositionSize();

$('#randomizeOrange').click(randomlyAssignOrangePositionSize);

$('#animateBlue').click(function() {
  ball1.animate({
    width: ball2.css('width'),
    height: ball2.css('height'),
    top: ball2.css('top'),
    left: ball2.css('left')
  });
});

Answer 1

我会继续回答我自己的问题。事实证明，从RC5开始，这在Angular 2中是不可能的。为了执行动画，我需要在运行时计算样式。这是目前Github上的一个开放功能请求：

Feature Request: Allow binding expression in style(), keyframes() etc...

特别是，请查看comment by @dpix以及@matsko的答案。

如何在Angular 2中为另一个元素顶部的一个元素设置动画？

1 个答案: