使用velocity.js和blast.js时，子元素开始不透明

Question

我有一个简单的包装器div，我使用velocity.js UI包进行动画制作。在完整的回调函数中，我使用UI pack和blast.js的组合来设置三个句子的动画。

问题是我的句子最初是显示的，只有在那之后它们才会被动画化。在将包装div动画化为视图后，它们不应该可见。

如果我没有为包装器div设置动画，那么一切都运行良好，猜测动画期间的不透明度设置会弄乱子元素。

$('.wrap').velocity('transition.slideUpIn', {
    delay: 1000,
    display: null, 
    complete : function(){
      $(".animated")
      .blast({ delimiter: "character" })
      .velocity("transition.fadeIn", { 
        display: null,
        duration: 1000,
        stagger: 60,
        delay: 400
      }); 
    }
})

以下是查看问题的小提琴：http://jsfiddle.net/vcsr6aqj/1/

Answer 1

你去（fiddle）。我确信有更优雅的解决方案。

似乎slideUpIn将opacity的动画从0设置为1，包括.animated的不透明度，可能是“已继承”。将其设置为0以隐藏它会修复它，但是.blast()不起作用，所以我们再次启用它。

Answer 2

问题是，您的p代码不在opacity: 0，而只在span内的blast字符$(".animated").blast({ delimiter: "character" })。由于您的隐形字符仅在您调用blast时创建，这意味着一旦您的包装器完成其显示，这些句子将在此之前可见。所以你有两个我能想到的可能性。

1. 在页面加载时使用$(document).ready(function() { $(".animated").blast({ delimiter: "character" }); $('.wrap').velocity('transition.slideUpIn', { delay: 1000, display: null, complete : function(){ $(".animated .blast").velocity("transition.fadeIn", { display: null, duration: 1000, stagger: 60, delay: 400 }); } }) }); 创建跨区字符，而不是在包装器速度完成时创建，然后在创建的跨度上调用速度：

   p

   JSFiddle example

2. 在opacity: 0个<p class="animated no-opacity">Sentence number one.</p> <p class="animated no-opacity">Sentence number two.</p> <p class="animated no-opacity">Just one sentence more.</p> 代码中添加一个类：

   .no-opacity {
       opacity: 0;
   } 
   

   CSS：

   p

   当您的包装器完成速度后，请从delay: 400标签中删除该类。另外，从速度属性中删除400，否则句子将显示$(document).ready(function() { $('.wrap').velocity('transition.slideUpIn', { delay: 1000, display: null, complete : function(){ $animated = $(".animated"); $animated.removeClass("no-opacity"); $animated.blast({ delimiter: "character" }) .velocity("transition.fadeIn", { display: null, duration: 1000, stagger: 60 }); } }) }); 毫秒：

   myAlgo

   JSFiddle example