velocity.js

Cannot read property 'pattern' error after velocity.js latest update (2.0.3)

由 佐手、 提交于 2019-12-24 03:14:29
问题 My code worked until yesterday: <script src="//cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script> $('[id^=home-layer-]').velocity({ transform: 'scale(2)' }, { duration: duration, easing: "ease-out", loop: false }); Now I'm getting an error: Uncaught TypeError: Cannot read property 'pattern' of undefined at ut (velocity.min.js:632) 回答1: It was a bug that slipped in with the new Sequences code when animating a property that reported a 0px value to start with - which should

Full screen slider with zoom in/out transition effect

由 半腔热情 提交于 2019-12-22 01:08:21
问题 I mean something like this. How can I obtain that result with a library like GSAP, Transit or VelocityJS? http://www.echocapital.com/ Thanks in advance :) 回答1: Dunno about GSAP and Velocity Cause all you need is a bit of CSS and some JS or jQuery, I mean you can rewrite easily the below in vanilla JS: var $gal = $("#gallery"), $img = $gal.find("> div"), n = $img.length, i = 0, t; $img.eq(i).addClass('on'); (function loop() { t = setTimeout(function(){ $img.removeClass("on").eq(i++%n).addClass

Velocity Scroll Issue with Version 2.0.1

由 安稳与你 提交于 2019-12-21 21:32:27
问题 An update to the newest version of Velocity (2.0.1) causes an issue related to scroll. Specifically, the following error message is thrown: Error: Velocity: First argument (scroll) was not a property map, a known action, or a registered redirect. Aborting. The following example works fine with Velocity 1.5: https://codepen.io/julianshapiro/pen/kBuEi Since SO requires code, here is the relevant portion from the CodePen: $("#element3").velocity("scroll", { container: $("#container"), duration:

Velocity Scroll Issue with Version 2.0.1

由 倖福魔咒の 提交于 2019-12-21 21:26:07
问题 An update to the newest version of Velocity (2.0.1) causes an issue related to scroll. Specifically, the following error message is thrown: Error: Velocity: First argument (scroll) was not a property map, a known action, or a registered redirect. Aborting. The following example works fine with Velocity 1.5: https://codepen.io/julianshapiro/pen/kBuEi Since SO requires code, here is the relevant portion from the CodePen: $("#element3").velocity("scroll", { container: $("#container"), duration:

How to use velocity.js in hover?

由 纵饮孤独 提交于 2019-12-13 17:05:18
问题 I have a question about using velocity.js for hovering on elements. Currently I use CSS to zoom in/out and animate elements when users hover on them, and I use velocity.js to animate them initially on page load. So my question is; how should I be using velocity.js to replace these CSS animations/should I at all? Currently I use velocity on page load as I'm sure that's what it was designed for, but was it also intended for use with things like hover? With jQuery I'm guessing this is how a

Animate an SVG object that uses SVG sprite icon

由 大兔子大兔子 提交于 2019-12-12 00:26:44
问题 I have an SVG sprite that contains 2 symbols, the second symbol uses the first one. I need to separate this into sprites, because i use the icons more then once. my problem is that i cannot animate the object the way i need, hope that someone can help. Basically its a button with an icon, once i click it, i change the scale in 20% + animate the color transition and the stroke transition to different colors. Currently i managed to reference the various symbol parts with jquery, i dont think

Velocity JS SVG transform origin issue in Firefox and IE

由 故事扮演 提交于 2019-12-11 03:34:55
问题 I would like to rotate an SVG group from the center using transform-origin: 50% 50%; using Velocity JS. This works fine in Chrome but I've noticed that the transform origin is wrong in IE and Firefox . I've tried setting an extra transform origin value and also tried setting the transform origin as pixels instead of % etc but with no luck. Can anyone explain how to fix this problem? I have a demo here http://codepen.io/styler/pen/wBRPEa?editors=101 Code snippet CSS .box { transform-origin: 50

Velocity.js/Blast.js triggering using fullpage.js

由 假装没事ソ 提交于 2019-12-11 00:45:03
问题 Following on from a solution posted here: Velocity.js/Blast.js starting opacity at 0 I am using Velocity.js and Blast.js to create a simple load in each word as an animation... one of the basic setups. I am also using this alongside Cycle2. I am also using fullpage.js, so sometimes a text slide might be the first slide, so is it possible to do the same thing on sliding down? If the text slide, with the animation, is also the first slide, to trigger the animation from opacity:0 just as it does

IE 11 magically crashing when doing animation with velocity.js and svg

由 时光总嘲笑我的痴心妄想 提交于 2019-12-08 01:50:48
问题 the js fiddle showing the crash of ie 11 when running velocity.js to do a svg animation just left click on the arrow with the f next to it this only happens in IE 11, maybe on other versions of IE too. Chrome works fine as it seems. HTML <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.js"></script> </head> <body> <style type="text/css"> body { background-color:

vue 过渡

由 纵然是瞬间 提交于 2019-12-07 02:11:35
添加过渡效果的方法： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js 1、单组件或子元素过渡，使用<transition>： <transition name="fade"> <p v-if="show">hello</p> </transition> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } 2、使用类名过渡： 在进入/离开的过渡中，会有 6 个 class 切换。 v-enter ：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active ：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 v-enter-to : 2.1.8版及以上
订阅 velocity.js