dart - 在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" ..