vue之vue与animate.css动画结合


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-动画title>
    <script src="https://unpkg.com/[email protected]/dist/vue.js">script>
    <script src="https://unpkg.com/[email protected]/lodash.min.js">script>
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    style>
head>
<body>
<div id="box">
    <input type="button" @click="toggle" value="切换">
    <transition
            name="custom-classes-transition"
            enter-active-class="animated tada"
            leave-active-class="animated bounceOutRight">
        <div v-show="ee" class="animated box">div>
    transition>

div>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#box',
        data: {
            ee: true
        },
        methods: {
            toggle: function () {
                this.ee = !this.ee
            }
        }

    })
script>
body>
html>

你可能感兴趣的:(vue-js)