Question

我想创建一个'链式'动画，将屏幕上的div元素连续两个步骤移动到屏幕上的两个不同点。

因此，如果我的div从（0,0）开始，我希望这个div能够动画并在2秒内向（100,100）移动。在它到达后一个目的地后，它再次动画并在3秒内移动到点（200,200）。

使用-webkit-animation我可以制作一个翻译或动画，但我不能将第二个动画链接到第一个动画完成后 - 因为我没有提供句柄（事件或css）可以给我这样的信息。

我很高兴使用一些javascript魔法作为解决方案的一部分。

以下是一些可视化我要做的事情的代码：

HTML：

<div id="box"></div>

CSS：

body {
    position: relative;
}

#box {
    width: 64px;
    height: 64px;
    position: absolute;
    text-indent: -9999px;
}

.translate1 {
    -webkit-transform: translate(100px, 100px);
    -webkit-transition: all 2s ease-in;
}

.translate2 {
    -webkit-transform: translate(100px, 100px);
    -webkit-transition: all 23 ease-in;
}

的Javascript

$('#box').click(function(){ $(this).addClass('translate1') });

编辑：我正在使用-webkit-animation的解决方案，因为它是目前在osx中显示流畅的原生动画的最佳方式

Answer 1

我使用jQuery和Modernizr，然后是这样的函数：

speed = 500;

var vP = "";
var transitionEnd = "transitionEnd";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
    transitionEnd = "msTransitionEnd";  
} else if ($.browser.mozilla) {
    vP = "-moz-";
    transitionEnd = "transitionend";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "oTransitionEnd";
}   

function animate(object, cssProperties, callback, ms) {
    if (!ms) {
        ms = speed;
    }

    if (Modernizr.csstransitions) {
        object.css(vP+"transition", "all "+ms+"ms ease-in-out");

        object.css(cssProperties);

        if ($.isFunction(callback)) {

            object.bind(transitionEnd,function(){
                object.unbind(transitionEnd);
                callback();
            });

        }

    } else {
        if ($.isFunction(callback)) {       
            object.animate(cssProperties, ms, callback);
        } else {
            object.animate(cssProperties, ms);          
        }
    }
}

然后将其称为：animate($("#someID"),{"left":"100px"});

详细了解http://css3.bradshawenterprises.com/legacy/。

Answer 2

实现这一目标的最简单方法是......

$('#box').click(function(){ 
  $(this).addClass('translate1').bind("webkitTransitionEnd", function() {
      $(this).addClass('translate2')
    })
});

http://jsfiddle.net/ALhym/

您的示例代码存在一些问题，我想真正的版本没有它们，但translate2具有与translate1相同的属性，并且-webkit-transition：所有23个缓入;缺少持续时间的单位，这是必需的。

Answer 3

使用jquery（animate）你可以这样做：

function moveTo100(){
  $('#box').animate({
    left: '+=100',
    top: '+=100'
  }, {
    duration: 2000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: moveTo200
  });
}

function moveTo200(){
  $('#box').animate({
    left: '+=100',
    top: '+=100'
  }, {
    duration: 3000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    }
  });
}

当然，你可以添加另一种效果和缓和类型。

Answer 4

这就是动画关键帧的用途。下面是使用悬停伪类的示例。

@-webkit-keyframes Move{
    0% {
        -webkit-transform: translate(0px,0px);
    }
    40% {
        -webkit-transform: translate(100px,100px);
    }     
    100%{
        -webkit-transform: translate(200px,200px);
    }
}

div:hover {
    -webkit-animation-name: Move;
    -webkit-animation-duration: 5s;
    -webkit-animation-fillmode: forward;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

如果您对CSS Animations的更长篇教程感兴趣，那么您的真实呈现完整的CSS Animation tutorial

链webkit动画

4 个答案: