zoukankan      html  css  js  c++  java
  • vue-transition-animation

    <!Doctype>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            @keyframes shape-change {
                0%, 100% {
                    border-radius: 50%;
                    background: red
                }
                50% {
                    border-radius: 0;
                    background: blue
                }
            }
    
            @keyframes moveball-in {
                0% {
                    transform: translate3d(300px, -200px, 0)
                }
                50% {
                    transform: translate3d(100px, -400px, 0)
                }
                100% {
                    transform: translate3d(0, 0, 0)
                }
            }
    
            @keyframes moveball-out {
                0% {
                    transform: translate3d(0, 0, 0)
                }
                50% {
                    transform: translate3d(100px, -400px, 0)
                }
                100% {
                    transform: translate3d(300px, -200px, 0)
                }
            }
    
            .btn {
                width: 40px;
                height: 30px;
                margin-top: 40px;
                border: none;
                outline: none;
                background: red;
                color: #fff;
            }
    
            .ball {
                position: absolute;
                bottom: 20px;
                left: 20px;
                width: 50px;
                height: 50px;
                transition: all 1s cubic-bezier(.22, -0.86, .97, .58)
            }
    
            .ball.move-enter-active {
                opacity: 1;
                animation: moveball-in 1s;
            }
    
            .ball.move-enter-active .inner {
                animation: shape-change 1s
            }
    
            .ball.move-leave-active {
                opacity: 0.8;
                animation: moveball-out 1s
            }
    
            .ball.move-leave-active .inner {
                animation: shape-change 1s
            }
    
            .inner {
                display: inline-block;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: red;
                transition: all 1s linear;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <template>
            <div class="app">
                <button @click="showball" class="btn">show</button>
                <transition name="move" type="animation">
                    <div class="ball" v-show="show">
                        <div class="inner"></div>
                    </div>
                </transition>
            </div>
        </template>
    </div>
    <script src="../vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                show: false
            },
            methods: {
                showball: function () {
                    this.show = !this.show;
                }
    
            }
        });
    </script>
    </body>
    </html>

     

  • 相关阅读:
    存储过程
    .Net经典面试题
    《锋利的Jquery》
    WPF-1
    ios-5-类别和协议
    ios-4-创建单例模式
    ios-3-简单内存管理
    ios-2
    ios -1
    <<ASP.NET MVC4 Web编程>>笔记
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7410311.html
Copyright © 2011-2022 走看看