Dojo无限弹跳动画

Question

我需要使用Dojo制作css3动画，但是我没有得到想要的结果。箭头悬停时，箭头应弹起。与此http://codepen.io/dodozhang21/pen/siKtp类似，但水平。HTML：

            <a href="#" class="uiAnimatedArrow" title="Buying a Home">
                <!-- -->
                <span>
                    <i data-copy="Learn More"><b></b></i>
                    Buying a Home
                </span>
            </a>

CSS：

a.uiAnimatedArrow i b {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 12px;
  margin: -6px 0 0 0;
  content: '';
  background: url("/assets/images/icons/arrow-right-black.png") 0 0 no-repeat;
  right: 13px;
}

  a.uiAnimatedArrow span:hover i b {
  -webkit-animation: bounce 1.5s infinite;
  -moz-animation: bounce 1.5s infinite;
  -ms-animation: bounce 1.5s infinite;
  -o-animation: bounce 1.5s infinite;
  animation: bounce 1.5s infinite;
}

有任何建议吗？

Answer 1

要在Dojo中执行此操作，必须使用dojo/_base/fx为right属性设置动画。但是，您不能在单个动画中执行此操作，因为定义了多个关键帧。因此，在以下情况下，您必须将其拆分（如果您希望与给定的Codepen类似）：

0%  0
20% 0
40% -30
50% 0
60% -15
80% 0

因此，我们需要4个单独的动画，从20％到40％，从40％到50％，从50％到60％以及从60％到80％。

使用dojo/_base/fx，您可以进行如下操作：

function frame40(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 0,
                end: 30
            }
        },
        delay: 800,
        duration: 200,
        easing: easing.quadInOut
    });
}

function frame50(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 30,
                end: 0
            }
        },
        duration: 200,
        easing: easing.quadInOut
    });
}

function frame60(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 0,
                end: 15
            }
        },
        duration: 200,
        easing: easing.quadInOut
    });
}

function frame80(node) {
    return fx.animateProperty({
        node: node,
        properties: {
            right: {
                start: 15,
                end: 0
            }
        },
        duration: 400,
        easing: easing.quadInOut
    });
}

在这种情况下，我为给定的right设置duration属性的动画。持续时间取决于关键帧百分比*动画总数（在Codepen中为2s）。

我还使用easing添加了dojo/fx/easing属性，因为否则，这只是线性动画，对我来说并不自然。

要调用动画，我们需要创建两个事件侦听器，一个mouseenter侦听器和一个mouseleave侦听器。在mouseenter侦听器中，我们将不得不链接动画并播放它。要链接它们，可以使用dojo/fx::chain()功能。但是，这只会播放一次动画。要无限运行它，我们使用setInterval()函数每2秒重复一次动画：

var interval, anim;
query(".arrow").on("mouseenter", function() {
    var node = this;
    var keyframes = function() {
        anim = coreFx.chain([
            frame40(node),
            frame50(node),
            frame60(node),
            frame80(node)
        ]).play();
    };
    interval = setInterval(keyframes, 2000);
    keyframes();
});

现在，在mouseleave事件处理程序中，我们必须清除间隔，并且如果正在播放动画，则必须停止动画。但是，停止动画可能会导致箭头“半空中”停止，因此我们必须正确地将其放回右侧，您也可以使用动画来做到这一点：

query(".arrow").on("mouseleave", function() {
    if (interval != null) {
        clearInterval(interval);
    }
    if (anim != null) {
        anim.stop();
        fx.animateProperty({
            node: this,
            properties: {
                right: 0
            },
            duration: 200,
            easing: easing.quadInOut
        }).play();
    }
});

应该包含所有内容，您可以在JSFiddle上查看完整的示例：http://jsfiddle.net/ro55btas/

Answer 2

“今天我进行了非常有益的演讲，详细介绍了比特币的工作原理，如何购买以及如何保护它。威廉先生为我介绍了一些简单的策略和重要的信息来帮助我入门，这样我就可以确保获得最佳的投资机会。有很多东西要学习，但是，威廉先生在他们的网站上提供了有价值的信息，还有许多其他途径可以帮助您及时了解最新信息，并获得巨大的机会。 ”非常感谢William先生联系她的电子邮件leewilliam664 @ gmail .com或Whatsapp号码+14086012169