julianshapiro/velocity

animation with property 'transfrom' in velocity does not work and an error appear instead

CaijinChen opened this issue · 1 comments

CaijinChen commented

My system information

  • VelocityJS version: beta(2.0.5)
  • Browser: Chrome
  • Operating System: Window10

Checklist

  • Is this an issue with code?: Yes
  • Is this an issue with documentation?: No
  • Have you reproduced this in other browsers?: Yes, but they produce different errors interestingly.
  • Have you checked for updates?: Yes
  • Have you checked for similar open issues?: Yes

Please remember that this is an issue tracker, support requests should be posted on StackOverflow - see CONTRIBUTING.md

Please describe your issue in as much detail as possible:

i use velocity.js in my vue project. so i install it with the following command:
npm install velocity-animate@beta --save. when i use it on color property, it works well, however, when i use it on transform property, it doesn't work and i found an error from my console. the error is ‘Cannot read property 'pattern' of undefined’

Steps for reproducing this issue (code):

i checked this problem in stackoverflow before, people say velocity-V2 does not support syntax like { scale: 2, translateY: 10px } anymore, so i use transform here. the following example produces the same bug as i describe before:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style type="text/css">
    	.id{
    		width: 200px;
    		height: 200px;
    		background-color: red;
    	}
    </style>
  </head>
  <body>
    <div class="id">
    	
    </div>
    <!-- the following velocity file is copied from module of velocity-animate@2.0.5  -->
    <script type="text/javascript" src="./velocity.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    	window.onload = ()=>{
    		document.getElementsByClassName('id')[0].velocity({
    			color: 'blue',
    			transform: 'scale(2)'
    		},{
    			duration: 10000,
    			easing: 'ease-in-out'
    		});
    	}
    </script>
  </body>
</html>
Rycochet commented

You need to supply a start and end value for transform -

    		document.getElementsByClassName('id')[0].velocity({
    			color: 'blue',
    			transform: ['scale(2)', 'scale(1)'] // to, from - and scale wants to start from 1 instead of 0
    		},{
    			duration: 10000,
    			easing: 'ease-in-out'
    		});