Vue11 -- 过渡与动画 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
             /*显示/隐藏过渡效果*/
            .xxx-enter-active, .xxx-leave-active {
              transition: opacity .5s;
            }
            /*隐藏时的样式*/
            .xxx-enter, .xxx-leave-to /* .fade-leave-active below version 2.1.8 */ {
              opacity: 0;
            }
            
            /*********************************************************************************************/
            /*显示过渡效果*/
            .move-enter-active{
                transition: all  1s;
            }
            /*隐藏过渡效果*/
            .move-leave-active{
                transition: all  3s;
            }
            /*隐藏时的样式*/
            .move-enter, .move-leave-to /* .fade-leave-active below version 2.1.8 */ {
              opacity: 0;
              transform: translateX(20px);
            }
            /*********************************************************************************************/
            .xxxxx-enter-active {
              animation: bounce-in .5s;
            }
            .xxxxx-leave-active {
              animation: bounce-in .5s reverse;
            }
            @keyframes bounce-in {
              0% {
                transform: scale(0);
              }
              50% {
                transform: scale(1.5);
              }
              100% {
                transform: scale(1);
              }
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button @click="IsShow = !IsShow">toggle</button>
            <transition  name='xxx'>
                <p v-show="IsShow">hello</p>
            </transition >
            
        </div>
        
        <div id="app2">
            <button @click="IsShow = !IsShow">toggle</button>
            <transition  name='move'>
                <p v-show="IsShow">hello</p>
            </transition >
            
        </div>
        
        <div id="app3">
            <button @click="IsShow = !IsShow">toggle</button>
            <br />
            <transition  name='xxxxx'>
                <p v-show="IsShow" style="background: red;display: inline-block;">hello</p>
            </transition >
            
        </div>
        
        <script src="https://vuejs.org/js/vue.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data(){
                    return{
                        IsShow:true
                    }
                }
            })
            
            var app2 = new Vue({
                el:'#app2',
                data(){
                    return{
                        IsShow:true
                    }
                }
            })
            
            var app3 = new Vue({
                el:'#app3',
                data(){
                    return{
                        IsShow:true
                    }
                }
            })
        </script>
    </body>
</html>

 

posted @ 2019-07-20 09:15  我在地球凑人数的日子  阅读(193)  评论(0)    收藏  举报