道場無限彈跳動畫

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
    });
}

在這種情況下，我在給定的duration為right屬性設置動畫。 持續時間基於關鍵幀百分比 * 總動畫（Codepen 中的2s ）。

我還使用dojo/fx/easing添加了一個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/