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时创建，这意味着一旦您的包装器完成其显示，这些句子将在此之前可见。所以你有两个我能想到的可能性。

在页面加载时使用$(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
在opacity: 0个Sentence number one. Sentence number two. Just one sentence more.代码中添加一个类：
```
.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

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

2 个答案: