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

在HTML中定义CoreAnimation的目标

1 个答案: