Vue动画—第三方类库实现动画

注意：1.使用了Animate类库，方便直接调用各种动画。点击进入官网2.用法大致同Bootstrap HTML代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">&l

何迟

13507人浏览 · 2018-09-25 21:15:26

何迟 · 2018-09-25 21:15:26 发布

注意：

1.使用了Animate类库，方便直接调用各种动画。点击进入官网

2.用法大致同Bootstrap

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
</head>
<body>

    <div id="app">
        <div>
            <input type="button" value="显示/隐藏" @click="flag=!flag" :duration="2000">
            <transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
                <h3 v-if="flag">陈小帅是真的帅！</h3>
                <!--通过一个标识符，然后可以不停将转换true/false，达到隐藏显示的目的-->
            </transition>
            <!--将需要转换的动画用transition承载，在头部实现样式-->
            <!--:duration可以一同设置进场和出场的时间，:duration="{enter:1000,leave:4000}分别设置"-->
        </div>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag:false
            }
        })
    </script>
</body>
</html>

效果：

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}$/, //不连续的两位字母// /^