普通html vue transition搭配animate.css实现动画

js yekong 1271℃
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>动画</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../css/animate.min.css">
    <script src="../js/vue2.js"></script>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body class="admin-big-body">
<div id="home" v-cloak>
    <div class="ceshi" @click="show=!show">测试</div>
    <transition name="custom-classes-transition" enter-active-class="animated slideInDown"
                leave-active-class="animated slideOutDown">
        <p v-if="show" style="color:red;padding-top: 100px;margin-left: 100px">hello word,I love China</p>
    </transition>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#home",
        data: {
            show: 0,
        },
        mounted: function () {

        },
        watch: {},
        computed: {},
        methods: {},
    })
</script>
</html>

喜欢 (2)