Vtron-animate NPM

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>

@everything-registry/sub-chunk-3071 @infinitebrahmanuniverse/nolb-vt

1.0.0

4 years ago