因此，我将尽力解释这一点。我有一个CSS卡，当按下按钮时，它将翻转。我遇到的问题是，当按下该按钮并且卡片翻转时，在弹出之前一会儿内容空白。我相信我应该寻找一种在按下按钮之前预加载此内容的方法，以便在事件发生之前将其存在于缓存中。
HTML
<div class="col-sm-10 col-sm-offset-1">
<div class="col-md-4 col-sm-6">
<div class="card-container manual-flip">
<div class="card">
<div class="front">
<div class="cover">
<img src="<?php bloginfo('template_directory');?>/images/team/thumb.png">
</div>
<div class="user">
<img class="img-circle" src="<?php bloginfo('template_directory');?>/images/team/member.png"/>
</div>
<div class="content">
<div class="main">
<h3 class="name">Team Member</h3>
<p class="profession">Position</p>
<p class="text-center">"Some Content Text"</p>
</div>
<div class="footer">
<button class="btn btn-simple" onclick="rotateCard(this)">
<i class="fa fa-mail-forward"></i> Manual Rotation
</button>
</div>
</div>
</div> <!-- end front panel -->
<div class="back">
<div class="header">
<h5 class="motto">"Some Content Text"</h5>
</div>
<div class="content">
<div class="main">
<h4 class="text-center">Job Description</h4>
<p class="text-center">Some Qualifications</p>
</div>
</div>
<div class="footer">
<button class="btn btn-simple" rel="tooltip" title="Flip Card" onclick="rotateCard(this)">
<i class="fa fa-reply"></i> Back
</button>
<div class="social-links text-center">
<a href="#" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
<a href="#" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
</div>
</div>
</div> <!-- end back panel -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div> <!-- end col sm 3 -->
<!-- <div class="col-sm-1"></div> -->
</div> <!-- end col-sm-10 -->
CSS
/* entire container, keeps perspective */
.card-container {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
margin-bottom: 30px;
}
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card-container.static:hover .card,
.card-container.static.hover .card {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}
/* flip speed goes here */
.card {
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-o-transition: -o-transform .5s;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
z-index: 3;
}
.back .btn-simple{
position: absolute;
left: 0;
bottom: 4px;
}
/* Style */
.card{
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px;
color: #444444;
}
.card-container, .front, .back {
width: 100%;
height: 420px;
border-radius: 4px;
}
.card .cover{
height: 105px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .cover img{
width: 100%;
}
.card .user{
border-radius: 50%;
display: block;
height: 120px;
margin: -55px auto 0;
overflow: hidden;
width: 120px;
}
.card .user img{
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #FFFFFF;
width: 100%;
}
.card .content{
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
padding: 10px 20px 20px;
}
.card .content .main {
min-height: 160px;
}
.card .back .content .main {
height: 215px;
}
.card .name {
font-size: 22px;
line-height: 28px;
margin: 10px 0 0;
text-align: center;
text-transform: capitalize;
}
.card h5{
margin: 5px 0;
font-weight: 400;
line-height: 20px;
}
.card .profession{
color: #999999;
text-align: center;
margin-bottom: 20px;
}
.card .footer {
border-top: 1px solid #EEEEEE;
color: #999999;
margin: 30px 0 0;
padding: 10px 0 0;
text-align: center;
}
.card .footer .social-links{
font-size: 18px;
}
.card .footer .social-links a{
margin: 0 7px;
}
.card .footer .btn-simple{
margin-top: -6px;
}
.card .header {
padding: 15px 20px;
height: 90px;
}
.card .motto{
border-bottom: 1px solid #EEEEEE;
color: #999999;
font-size: 14px;
font-weight: 400;
padding-bottom: 10px;
text-align: center;
}
.card .stats-container{
width: 100%;
margin-top: 50px;
}
.card .stats{
display: block;
float: left;
width: 33.333333%;
text-align: center;
}
.card .stats:first-child{
border-right: 1px solid #EEEEEE;
}
.card .stats:last-child{
border-left: 1px solid #EEEEEE;
}
.card .stats h4{
font-weight: 300;
margin-bottom: 5px;
}
.card .stats p{
color: #777777;
}
/* Just for presentation */
.title{
color: #506A85;
text-align: center;
font-weight: 300;
font-size: 44px;
margin-bottom: 90px;
line-height: 90%;
}
.title small{
font-size: 17px;
color: #999;
text-transform: uppercase;
margin: 0;
}
.space-30{
height: 30px;
display: block;
}
.space-50{
height: 50px;
display: block;
}
.space-200{
height: 200px;
display: block;
}
.white-board{
background-color: #FFFFFF;
min-height: 200px;
padding: 60px 60px 20px;
}
.ct-heart{
color: #F74933;
}
pre.prettyprint{
background-color: #ffffff;
border: 1px solid #999;
margin-top: 20px;
padding: 20px;
text-align: left;
}
.atv, .str{
color: #05AE0E;
}
.tag, .pln, .kwd{
color: #3472F7;
}
.atn{
color: #2C93FF;
}
.pln{
color: #333;
}
.com{
color: #999;
}
JS
function rotateCard(btn){
var $card = jQuery(btn).closest('.card-container');
console.log($card);
if($card.hasClass('hover')){
$card.removeClass('hover');
} else {
$card.addClass('hover');
}
}
还应该提到的是，我正在WordPress的后面构建它，因此，如果有一个可以使工作更轻松的插件，我也对此持开放态度。 TIA
答案 0 :(得分：1)
假设您单击卡时启动了获取数据的请求，则可以尝试使用jQuery的hover()函数将鼠标移到数据上方时启动。如果需要，您也可以在鼠标停止悬停时卸载数据。如果仍然太慢，我唯一想到的就是预加载。