在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

核心动画只支持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" ..