Tag: velocity.js

Velocity.js / Blast.js在0处开始不透明度: 我正在使用Velocity.js和Blast.js在每个单词中创建一个简单的加载作为动画…基本设置之一。我也在和Cycle2一起使用它。我有一些问题，我想要实现的目标，我无法从文档中解决。在“循环2”滑块中，“速度/爆炸function”可以存在于许多幻灯片中，因此每次都需要重新运行。这就是我想要实现的目标： Velocity动画需要从不透明度开始：每次都是0 …所以当你循环到幻灯片时，它会从0到1运行而不是显示它，然后隐藏它，然后运行动画。当您循环滑块next / prev时，它应重新运行并从0开始，如前所述。删除每个单词的过渡/淡入淡出，只需将其作为显示/隐藏。我希望这是有道理的。我已经创建了一个简单的JSFiddle来向您展示一个基本的设置和我到目前为止所拥有的。希望你能帮忙。 http://jsfiddle.net/h3vo8LL1/1/ // function featuredProjectTextAnimation() { $(‘.home-section-container .each-section .each-slide.text .text-container.animated’) .blast({ delimiter: ‘word’ }) .velocity(‘transition.fadeIn’, { display: null, duration: 0, stagger: 100, delay: 400, begin: function() { // }, complete: function() { // } }); } // if ($(‘.home-slider-container’).length > 0) { […]

为什么动画会长时间抖动/波涛汹涌？: 当我使用velocity.js在15秒内向左侧90px和90px向下动画时，动画有点紧张。我该如何解决这个问题，还是应该为JS使用另一个动画库？ $(function() { $(“#box”).velocity({ top: 90, left: 90 }, { duration: 15000, easing: ‘ease-in-out’ }); }); #box { color: white; background-color: black; width: 50px; height: 50px; text-align: center; line-height: 50px; position: absolute; } box 在Codepen上查看

使用velocity.js和svg进行动画时，IE 11神奇地崩溃了: 当运行velocity.js做一个svg动画时，js小提示显示ie 11的崩溃只需左键单击箭头旁边的f 这只发生在IE 11中，也许在其他版本的IE上也是如此。 Chrome似乎很好用。 HTML body { background-color:#000000 } #box1 { position: absolute; left: 250px; top: 330px; width: 257px; height: 62px; opacity: 0; z-index: 1; } #box2 { position: absolute; right: 250px; top: 330px; width: 315px; height: 62px; opacity: 0; z-index: 1; } #positionP { position: absolute; left: 250px; top: 330px; } […]