vtron-animate
v1.0.0
Published
Vtron一体化产品部公用CSS动画库
Downloads
2
Readme
vtron-animate
Vtron一体化产品部公用CSS动画库
如何使用
- 如果你是前端工程化项目，直接
npm install vtron-animate就可以直接使用了 - 如果不是前端工程化，单纯引入文件
你可以直接下载
vtron-animate.min.css文件就好了
如何开发
如果你想给这个库增加动画效果：
- 把本项目clone下来
- 运行
npm install - 为了更好的代码可读性，在
src目录下，开一个文件夹，把你想写的css写在文件夹里面（你可以参考slide是怎么写的） - 当你每次写好代码后，运行
npm run build编译合并压缩代码 - 编译好的代码就在dist文件夹里面，你可以测试能不能用
ps. 代码风格最好严格遵循/src/slide来写，一定要写注释
建议测试方法：
在dist文件夹下面建一个index.html，如下
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="vtron-animate.min.css">
</head>
<body>
<button id="btn1">点击看效果</button><br/><br/><br/>
<div id="div1" style="width: 100px;height: 200px; background-color: red;"></div>
<script>
var btn1 = document.getElementById('btn1')
var div1 = document.getElementById('div1')
btn1.onclick = function(){
btn1.disabled = "disabled"
div1.className = 'animated slideInLeft'//就在这里更换你新开发的效果
setTimeout(function(){
btn1.disabled = ''
div1.className = ''
},1500)
}
</script>
</body>