在 HTML 中定义 CoreAnimation 的目标

Question

我正在编写一个 Dart 应用程序并使用 CoreAnimation 为我的一些元素设置动画。我的一个动画看起来像这样：

   <core-animation id="animOnLoginSuccessForm" duration="500" fill="forwards" easing="ease-out">
      <core-animation-keyframe>
        <core-animation-prop name="opacity" value="1.0"></core-animation-prop>
        <core-animation-prop name="transform" value="translateY(0%)"></core-animation-prop>
      </core-animation-keyframe>
      <core-animation-keyframe>
        <core-animation-prop name="opacity" value="0.0"></core-animation-prop>
        <core-animation-prop name="transform" value="translateY(75%)"></core-animation-prop>
      </core-animation-keyframe>
    </core-animation>

然后我使用一些 Dart 代码在元素上启动动画：

  var animationForm = ($['animOnLoginSuccessForm'] as CoreAnimation);
  animationForm.target = $['form'];
  animationForm.play();

我想在我的 HTML 中定义动画的目标，这样我只需要在 Dart 中调用 play 方法。我怎样才能做到这一点？我尝试了一切，例如：

<core-animation target="form" id="animOnLoginSuccessForm" duration="500" fill="forwards" easing="ease-out">
<core-animation target="#form" id="animOnLoginSuccessForm" duration="500" fill="forwards" easing="ease-out">
<core-animation target="{{#form}}" id="animOnLoginSuccessForm" duration="500" fill="forwards" easing="ease-out">

但没有任何效果。所以对我来说，似乎无法在 HTML 中定义目标，但你怎么看？有可能吗，我只是做错了什么？

Answer 1

core-animation 仅支持以下类型 target:

HTMLElement|Node|Array<HTMLElement|Node>

因此，为了通过属性分配目标，您至少需要传递一个 HTMLElement。

试试这个：

<core-animation target="{{ $.form }}" id="animOnLoginSuccessForm" duration="500" fill="forwards" easing="ease-out">

您的 <form> 已将表单设置为 ID，例如<form id="form" ..

在 HTML 中定义 CoreAnimation 的目标

Define target for CoreAnimation in HTML

dart

polymer

dart-polymer