具有承诺模式的Web动画API - 代码清洁度

Question

我有一个场景，我尝试使用promises（bluebird）将网络动画链接在一起。

通过网络动画我的意思是element.animate样式动画。我已经创建了一个通用的动画承诺包装器：

function promiseAnimation(element, keyframes, timing) {
  return new Promise(function(resolve, reject) {
    element.animate(keyframes , timing).onfinish = function(e) {
      resolve();
    }
  });
}

然后我将元素，数组和计时对象传递给该函数。动画执行并且承诺结算。唯一的问题是最终结果看起来有点难看......

promiseAnimation(element, keyframe1, timing1 ).then(function(){
  //isn't this just as bad as callbacks?
  promiseAnimation(element, keyframe2, timing2 ).then(function(){
    alert('lolz');
  });
});

为什么丑？因为它基本上看起来像回调。将其中的五个链接在一起，似乎会留下一个难以理解的代码块 - 这与Promise（s）似乎......承诺相反。

我想另一种方法是返回一个函数，而不是一个promise并明确地执行它，让我这样：

promiseAnimation(blah,blah)()
  .then(promiseAnimation(blah,blah))

但这似乎也不太理想。实现清晰的承诺链的最简洁方法是什么，同时还要确保.then仅在动画结束时执行？

您可以在此处查看我的代码：http://codepen.io/anon/pen/ONbXdx