我正在尝试对元素进行简单的“翻转”转换。它在Firefox中完美运行,但在Chrome中我得到了一个可怕的闪烁。
搜索并尝试了很多内容,包括将-webkit-backface-visibility: hidden;
添加到转换元素后,我找不到修复方法。
有什么想法吗?
Here's a fiddle to show what I mean
这是我正在使用的代码:
$('#passwordStrength__flipper').click(function() {
$(this).toggleClass('flipped'); // for testing, click the element
});
.passwordStrength {
clear: both;
width: 99%;
position: relative;
padding-bottom: 0px;
height: 240px;
/* set viewing perspective */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.passwordStrength #passwordStrength__flipper {
width: 100%;
height: 200px;
position: absolute;
background-color: #EAEAEA;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-sizing: border-box;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -ms-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.passwordStrength #passwordStrength__flipper.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.passwordStrength #passwordStrength__flipper figure {
display: block;
height: 100%;
width: 100%;
position: absolute;
margin: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.passwordStrength #passwordStrength__flipper .passwordStrength__criteriaHolder {
display: block;
padding: 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-sizing: border-box;
}
.passwordStrength #passwordStrength__flipper .passwordStrength__criteriaHolder #passwordStrength__suggestions {
width: 100%;
margin-top: 8px;
color: #999;
position: relative;
}
.passwordStrength #passwordStrength__flipper .passwordStrength--success {
height: 100%;
width: 100%;
background: #00C2A2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-sizing: border-box;
color: #fff;
text-align: center;
font-size: 16px;
padding: 14px 30px;
line-height: 26px;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="passwordStrength" id="password_popup_inline">
<div id="passwordStrength__flipper">
<figure class="passwordStrength__criteriaHolder">Click me...</figure>
<figure class="passwordStrength--success">...then click me</figure>
</div>
</div>
答案 0 :(得分:2)
尝试将-webkit-backface-visibility: hidden;
添加到.passwordStrength #passwordStrength__flipper.flipped
这里是小提琴:http://jsfiddle.net/4p93v6oj/1/
更新:
新小提琴:http://jsfiddle.net/4p93v6oj/2/
正如下面的其他人指出的那样,第一个解决方案不起作用,因为当隐藏背面时,click事件不会在元素上注册。
我修改了jquery来触发外部元素上的click事件,如下所示:
$('.passwordStrength').click(function () {
$('#passwordStrength__flipper').toggleClass('flipped');
});
然后,添加了.passwordStrength #passwordStrength__flipper