Question

我正在使用Articulate Storyline创建一些很酷的javascript动画... 首先，我需要找到并选择要设置动画的元素... 我正在使用jQuery通过查找CSS类来选择元素。我几乎可以通过分配给它们的任何数据属性来查找元素，在这种情况下，它是aria标签。因此，我的选择器将如下所示：

 $('[aria-label="my_image"]')

不过，我需要采取进一步的措施。故事情节发布时，几乎将您放在幻灯片上的所有内容都转换为SVG。它包装了带有HTML DIV标签的SVG，该标签包含我们的aria标签。因此，我实际上是想在DIV中将效果应用到SVG，所以选择如下：

 $('[aria-label="my_image"] svg')

现在我有了我的元素，可以使用GreenSock的TweenLite或任何JS动画引擎为其制作一些动画。例如，以下代码将找到“ myElement”并将其推到右侧...

注意：“ myElement”元素是我的故事情节舞台上的图像。并在单击按钮时执行代码。

var item = $('[aria-label="myElement"] svg')
go();
function go() {
    TweenLite.to(item, 1, {left:"63px"});
}

现在我想使用Anime.JS动画引擎代替TweenLite，我感到困惑，为什么它不起作用？以及如何使其工作？

var item = $('[aria-label="spinner"] svg')
go();
function go() {
    var customBezier = anime({
        targets: '#item',
        translateX: 250,
        easing: [.91,-0.54,.29,1.56]
    });
}

我不知道如何引用我的目标？我已经尝试过了：

targets: '#item',
targets: '.item',
targets: 'item',

非常感谢任何想法...

Answer 1

您尝试过'[aria-label="spinner"] svg'吗？

function go() {
  var customBezier = anime({
    targets: '[aria-label="spinner"] svg',
    translateX: 250,
    easing: [.91,-0.54,.29,1.56]
  });
}

AnimeJS想要的就是CSS选择器。

Answer 2

您应该删除撇号：

var item = $('[aria-label="spinner"] svg')
go();
function go() {
    var customBezier = anime({
        targets: item,
        translateX: 250,
        easing: [.91,-0.54,.29,1.56]
    });
}

http://animejs.com/documentation/

如何使用Anime.JS为我的元素设置动画？

2 个答案: