Question

我需要使用Dojo制作这个css3动画，但是我没有得到想要的结果。当它徘徊时箭头会反弹。 Simiilar对此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/

道场无限弹跳动画

1 个答案: