Question

https://jsfiddle.net/zeqnthe0/2/

.flipped-to-back
{
    -webkit-transform : rotateX(180deg);
            transform : rotateX(180deg);
}

＆＃13;

new Vue({
	data () {
  	return {
               btnTicketingActive : false,
               btnEcosystemActive : false
    }
  },
  
          methods :
        {
            toggleBtnTicketing : function ()
            {
                this.btnTicketingActive = !this.btnTicketingActive;
            },

            toggleBtnEcosystem : function ()
            {
                this.btnEcosystemActive = !this.btnEcosystemActive;
            },

            checkBtnTicketing : function ()
            {
                if (this.btnTicketingActive)
                {
                    this.btnTicketingActive = !this.btnTicketingActive;
                }
            },

            checkBtnEcosystem : function ()
            {
                if (this.btnEcosystemActive)
                {
                    this.btnEcosystemActive = !this.btnEcosystemActive;
                }
            }
        },
        
            directives:
        {
            'click-outside':
            {
                bind: function (el, binding, vNode)
                {
                    // Provided expression must evaluate to a function.
                    if (typeof binding.value !== 'function')
                    {
                        const compName = vNode.context.name;
                        let warn       = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`;

                        if  (compName)
                        {
                            warn += `Found in component '${compName}'`;
                        }

                        console.warn(warn);
                    }

                    // Define Handler and cache it on the element
                    const bubble  = binding.modifiers.bubble;
                    const handler = (e) =>
                    {
                        if (bubble || (!el.contains(e.target) && el !== e.target))
                        {
                            binding.value(e);
                        }
                    }

                    el.__vueClickOutside__ = handler;

                    // Add Event Listeners
                    document.addEventListener('click', handler);
                },

                // Remove Event Listeners
                unbind: function (el, binding)
                {
                    document.removeEventListener('click', el.__vueClickOutside__);

                    el.__vueClickOutside__ = null;
                }
            }
        }
}).$mount('#app')

＆＃13;

/* ------------------ */
    /* START - Intro Page */
    /* ------------------ */

    /*
    Primary 1 : #00796B;
            Lighter : #48A999
            Darker  : #004C40
            Fill    : #F5F5F6

    Primary 2 : #607D8B
            Lighter : #8EACBB
            Darker  : #34515E
            Fill    : #F5F5F6
            Accent  : #FF5722
    */

    /* ---------------------- */
    /* Primary Box Containers */
    /* ---------------------- */

    .btn-ecosystem, .btn-ticketing
    {
        height                   : 12.5rem;
        width                    : 100%;
        outline                  : none;
        border                   : 0;
        background-color         : unset;
        padding                  : 0;
        -webkit-transition       : 0.6s;
                transition       : 0.6s;
        -webkit-transform-style  : preserve-3d;
                transform-style  : preserve-3d;
        -webkit-transform-origin : 50% 50%;
                transform-origin : 50% 50%;
    }

    .flipped-to-back
    {
        -webkit-transform : rotateX(180deg);
                transform : rotateX(180deg);
    }

    /* ----- */
    /* Front */
    /* ----- */

    .btn-ticketing-front
    {
        width                       : 100%;
        height                      : 100%;
        background-color            : #607D8B;
        cursor                      : pointer;
        /*-webkit-backface-visibility : hidden;
                backface-visibility : hidden;*/
        -webkit-tap-highlight-color : transparent;
        -webkit-transition          : all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
                transition          : all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        box-shadow                  : 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        display                     : flex;
        align-items                 : center; /* Align the inner div vertically */
        justify-content             : center; /* Align the inner div horizontally */
    }

    .btn-ticketing-front:hover
    {
        background-color : #34515E;
        box-shadow       : 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

    .btn-ecosystem-front
    {
        width                       : 100%;
        height                      : 100%;
        background-color            : #00796B;
        cursor                      : pointer;
        -webkit-backface-visibility : hidden;
                backface-visibility : hidden;
        -webkit-tap-highlight-color : transparent;
        -webkit-transition          : all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
                transition          : all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        box-shadow                  : 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        display                     : flex;
        align-items                 : center; /* Align the inner div vertically */
        justify-content             : center; /* Align the inner div horizontally */
    }

    .btn-ecosystem-front:hover
    {
        background-color : #004C40;
        box-shadow       : 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

    .flipped-to-back .btn-ticketing-front, .flipped-to-back .btn-ecosystem-front
    {
        pointer-events : none;
    }

    /* ---- */
    /* Back */
    /* ---- */

    .btn-ticketing-back
    {
        position                    : absolute;
        width                       : 100%;
        height                      : 100%;
        background-color            : #607D8B;
        cursor                      : pointer;
        -webkit-transform           : translateZ(-2px) rotateX(180deg);
                transform           : translateZ(-2px) rotateX(180deg);
        overflow                    : hidden;
        box-shadow                  : 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        -webkit-backface-visibility : hidden;
                backface-visibility : hidden;
        -webkit-tap-highlight-color : transparent;
        display                     : flex;
        align-items                 : center; /* Align the inner div vertically */
        justify-content             : center; /* Align the inner div horizontally */
    }

    .btn-ecosystem-back
    {
        position                    : absolute;
        width                       : 100%;
        height                      : 100%;
        background-color            : #00796B;
        cursor                      : pointer;
        -webkit-transform           : translateZ(-2px) rotateX(180deg);
                transform           : translateZ(-2px) rotateX(180deg);
        overflow                    : hidden;
        box-shadow                  : 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        -webkit-backface-visibility : hidden;
                backface-visibility : hidden;
        -webkit-tap-highlight-color : transparent;
        display                     : flex;
        align-items                 : center; /* Align the inner div vertically */
        justify-content             : center; /* Align the inner div horizontally */
    }

    /* ------------- */
    /* Button Corner */
    /* ------------- */

    .btn-corner
    {
        position            : absolute;
        height              : 4rem;
        width               : 4rem;
        -webkit-backface-visibility: hidden;
                backface-visibility : hidden;
    }

    .btn-ticketing .btn-corner
    {
        border-right        : 1.1rem solid #8EACBB;
        border-top          : 1.1rem solid #8EACBB;
    }

    .btn-ecosystem .btn-corner
    {
        border-right        : 1.1rem solid #48A999;
        border-top          : 1.1rem solid #48A999;
    }

    .btn-ticketing:hover .btn-corner
    {
        border-right       : 1.1rem solid #8EACBB;
        border-top         : 1.1rem solid #8EACBB;
        -webkit-transition : 0.2s;
        -moz-transition    : 0.2s;
        transition         : 0.2s;
    }

    .btn-ecosystem:hover .btn-corner
    {
        border-right       : 1.1rem solid #48A999;
        border-top         : 1.1rem solid #48A999;
        -webkit-transition : 0.2s;
        -moz-transition    : 0.2s;
        transition         : 0.2s;
    }

    .btn-ticketing .btn-corner:nth-of-type(1), .btn-ecosystem .btn-corner:nth-of-type(1),
    .btn-ticketing .btn-corner:nth-of-type(5), .btn-ecosystem .btn-corner:nth-of-type(5)
    {
        right               : -0.5rem;
        top                 : -0.5rem;
    }

    .btn-ticketing:hover .btn-corner:nth-of-type(1)
    {
        border-right : 0.4rem solid #607D8B;
        border-top   : 0.4rem solid #607D8B;
        right        : 2.5rem;
        top          : 2.5rem;
        width        : 2rem;
        height       : 2rem;
    }

    .btn-ecosystem:hover .btn-corner:nth-of-type(1)
    {
        border-right : 0.4rem solid #00796B;
        border-top   : 0.4rem solid #00796B;
        right        : 2.5rem;
        top          : 2.5rem;
        width        : 2rem;
        height       : 2rem;
    }

    .btn-ticketing .btn-corner:nth-of-type(2), .btn-ecosystem .btn-corner:nth-of-type(2),
    .btn-ticketing .btn-corner:nth-of-type(6), .btn-ecosystem .btn-corner:nth-of-type(6)
    {
        left                : -0.5rem;
        top                 : -0.5rem;
        -webkit-transform   : rotateZ(-90deg);
                transform   : rotateZ(-90deg);
    }

    .btn-ticketing:hover .btn-corner:nth-of-type(2)
    {
        left         : 2.5rem;
        top          : 2.5rem;
        width        : 2rem;
        height       : 2rem;
        border-right : 0.4rem solid #607D8B;
        border-top   : 0.4rem solid #607D8B;
    }

    .btn-ecosystem:hover .btn-corner:nth-of-type(2)
    {
        left         : 2.5rem;
        top          : 2.5rem;
        width        : 2rem;
        height       : 2rem;
        border-right : 0.4rem solid #00796B;
        border-top   : 0.4rem solid #00796B;
    }

    .btn-ticketing .btn-corner:nth-of-type(3), .btn-ecosystem .btn-corner:nth-of-type(3),
    .btn-ticketing .btn-corner:nth-of-type(7), .btn-ecosystem .btn-corner:nth-of-type(7)
    {
        bottom              : -0.5rem;
        left                : -0.5rem;
        -webkit-transform   : rotateZ(180deg);
                transform   : rotateZ(180deg);
    }

    .btn-ticketing:hover .btn-corner:nth-of-type(3)
    {
        bottom       : 2.5rem;
        left         : 2.5rem;
        width        : 2rem;
        height       : 2rem;
        border-right : 0.4rem solid #607D8B;
        border-top   : 0.4rem solid #607D8B;
    }

    .btn-ecosystem:hover .btn-corner:nth-of-type(3)
    {
        bottom       : 2.5rem;
        left         : 2.5rem;
        width        : 2rem;
        height       : 2rem;
        border-right : 0.4rem solid #00796B;
        border-top   : 0.4rem solid #00796B;
    }

    .btn-ticketing .btn-corner:nth-of-type(4), .btn-ecosystem .btn-corner:nth-of-type(4),
    .btn-ticketing .btn-corner:nth-of-type(8), .btn-ecosystem .btn-corner:nth-of-type(8)
    {
        bottom              : -0.5rem;
        right               : -0.5rem;
        -webkit-transform   : rotateZ(90deg);
                transform   : rotateZ(90deg);
    }

    .btn-ticketing:hover .btn-corner:nth-of-type(4)
    {
        bottom       : 2.5rem;
        right        : 2.5rem;
        width        : 2rem;
        height       : 2rem;
        border-right : 0.4rem solid #607D8B;
        border-top   : 0.4rem solid #607D8B;
    }

    .btn-ecosystem:hover .btn-corner:nth-of-type(4)
    {
        bottom       : 2.5rem;
        right        : 2.5rem;
        width        : 2rem;
        height       : 2rem;
        border-right : 0.4rem solid #00796B;
        border-top   : 0.4rem solid #00796B;
    }

    /* ------------ */
    /* H2 Card Text */
    /* ------------ */

    .btn-ticketing-front h2, .btn-ecosystem-front h2
    {
        font-family        : Bree Serif;
        letter-spacing     : 1.2rem;
        color              : #FFF;
        text-align         : center;

        -webkit-transition : 0.2s;
        -moz-transition    : 0.2s;

  .btn-ticketing-front:hover h2, .btn-ecosystem-front:hover h2
    {
        font-size          : 2.5rem;
        font-weight        : bold;
        letter-spacing     : 0.3rem;
        -webkit-transition : 0.2s;
        -moz-transition    : 0.2s;
        transition         : 0.2s;
    }

    /* ------------------ */
    /*  END - Intro Page  */
    /* ------------------ */

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <button class="btn-ticketing" @click="toggleBtnTicketing" v-bind:class="{ 'flipped-to-back' : btnTicketingActive }" v-click-outside="checkBtnTicketing">
                        <div class="btn-ticketing-back">
                            <p>Btn 1 Back</p>
                        </div>
                        <div class="btn-ticketing-front">
                            <h2 class="my-auto">Btn 1 Front</h2>
                            <div class="btn-corner"></div>
                            <div class="btn-corner"></div>
                            <div class="btn-corner"></div>
                            <div class="btn-corner"></div>
                            <div class="btn-corner"></div>
                            <div class="btn-corner"></div>
                            <div class="btn-corner"></div>
                            <div class="btn-corner"></div>
                        </div>
                </button>
            </div>

            <div class="col-sm-6">
                <button class="btn-ecosystem" @click="toggleBtnEcosystem" v-bind:class="{ 'flipped-to-back' : btnEcosystemActive }" v-click-outside="checkBtnEcosystem">
                    <div class="btn-ecosystem-back">
                        <p>Btn 2 Back</p>
                    </div>
                    <div class="btn-ecosystem-front">
                        <h2>Btn 2 Front</h2>
                        <div class="btn-corner"></div>
                        <div class="btn-corner"></div>
                        <div class="btn-corner"></div>
                        <div class="btn-corner"></div>
                        <div class="btn-corner"></div>
                        <div class="btn-corner"></div>
                        <div class="btn-corner"></div>
                        <div class="btn-corner"></div>
                    </div>
                </button>
            </div>
        </div>
    </div>
</div>

＆＃13;

单击按钮并向后翻转时，您可以看到按钮会立即剪切前两个角，然后在动画完成时正确消失。再次单击时，按钮会向后翻转，并且按钮会暂时剪切前两个角，直到动画停止。与此同时，底角看起来很好。

JSFiddle使这个效果看起来像一个闪烁但在Chrome中它发生得很慢而且非常明显。

我需要角落与按钮的前层一起出现。

有什么想法吗？

CSS在顶角DIV

0 个答案: