https://jsfiddle.net/zeqnthe0/2/
.flipped-to-back
{
-webkit-transform : rotateX(180deg);
transform : rotateX(180deg);
}
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')/* ------------------ */
/* 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 */
/* ------------------ */<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>
单击按钮并向后翻转时，您可以看到按钮会立即剪切前两个角，然后在动画完成时正确消失。再次单击时，按钮会向后翻转，并且按钮会暂时剪切前两个角，直到动画停止。与此同时，底角看起来很好。
JSFiddle使这个效果看起来像一个闪烁但在Chrome中它发生得很慢而且非常明显。
我需要角落与按钮的前层一起出现。
有什么想法吗？