• vue-transtion交互(也叫作动画)


    <style>

    #div1{

    100px;

    height:100px;

    background:red;

    }

    .fade-transition{

    trnsition:1s all ease;

    }

    .fade-enter{

    opacity:0;

    }

    .fade-leave{

    opacity:0;

    }

    </style>

    <div id="div1" v-show="bSign" transition="bounce"></div>

    利用animate.css(从cdn中下载)

    <link rel="stylesheet" href="../css/animate.css"/>

    <style>

    #div1{

    100px;

    height:100px;

    background:red;

    }

    </style>

    <div id="box">

    <button type="button" v-on:click="show">点击</button>

    <div id="div1" class="animated" v-show="bSign" transition="bounce"></div><!--其中的animated是animate.css中的css样式-->

    </div>

    var vm=new Vue({

    el:"#box",

    data:{

    bSign:false

    }

    methods:{

    show:function(){

    this.bSign=!this.bSign;

    }

    },

    trnsitions:{

      bounce:{

        enterClass:'zoomInLeft',

        leaveClass:'zoomOutRight'

      }

    }

    })

  • 相关阅读:
    cJSON库源码分析
    cJSON 使用详解
    day23
    day22
    作业21
    day21
    作业20
    day20
    作业
    day19
  • 原文地址:https://www.cnblogs.com/Ting-log/p/9129477.html
Copyright © 2020-2023  润新知