一款非常好用的css动画库--animate.css

今天再学习vue.js的时候看到了一个不错的css库，vue官方推荐（不一定要使用vue.js才能使用这个css库），这个库叫做animate.css，是个动画效果的css库，有好多不错的动画效果。首先看怎么引用，官网下载：https://raw.githubusercontent.com/daneden/animate.css/master/animate.css效果试用：https...

阳菜

4244人浏览 · 2018-09-07 17:24:45

阳菜 · 2018-09-07 17:24:45 发布

今天再学习vue.js的时候看到了一个不错的css库，vue官方推荐（不一定要使用vue.js才能使用这个css库），这个库叫做animate.css，是个动画效果的css库，有好多不错的动画效果。

首先看怎么引用，

官网下载：https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

效果试用：https://daneden.github.io/animate.css

在线引用：http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css

然后是在实际项目中的使用：

<!DOCTYPE>
<html>
    <head>
        <title>animate测试</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" />
    <style>
        #box{
            width:100px;
            height:100px;
            background:#ff0000;
        }
        </style>
    </head>
    <body>
    <div class="animated" id="box">animate</div>
        <button id="add">add</button>
        <button id="remove">remove</button>
        <script>
            var add = document.getElementById('add');
            var remove = document.getElementById('remove');
            var box = document.getElementById('box');
            add.onclick = function(){
            box.classList.add("bounceInLeft");
            box.classList.remove("bounceOutLeft");
            }
            remove.onclick = function(){
            box.classList.add("bounceOutLeft");
            box.classList.remove("bounceInLeft");
            }
        </script>
    </body>  
</html>

可以看到我先是在页面上构建了一个100*100的红色方块，赋予一个animated的类（必需），或者也可以在js中添加这个类，然后定义了两个按钮，分别给方块添加bounceInLeft类和bounceOutLeft类，以及删除相反的类（不删除没有效果），接着就可以在页面上看到效果啦，按add按钮会让方块从左边滑入，按remove按钮会让方块从左边滑出。

当然这只是animate库中的一个动画效果，还有其他好多有趣的效果。下面展示效果种类一部分的截图（具体所有效果可进入上方效果试用链接进行使用）：

在上方代码中，js部分还可以加上

box.classList.add('infinite');

这样子就会循坏动画效果了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^