使用css过渡和变换进行动画制作时,奇怪的全屏白色闪烁

时间:2014-05-21 23:02:39

标签: javascript jquery css css3

守则:http://jsfiddle.net/techsin/zLA8j/4/show

出于某种原因,当您单击按钮并且动画即将完成时,将无缘无故地显示白色falsh。我无法调试它。我需要帮助。但有时候没有问题。

$('.btn').click(
    function(){
        var t= $(this);
        t.css('transform','scale(.9)');
        setTimeout(function(){t.css('transform','');},600);
    }
);

HTML ---

<div class="con">
    <div class="con2">
        <div class="pop">
            <header>Would you like to be Awesome?</header>
            <div class="txt">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat totam quos quisquam in iure ea provident asperiores nesciunt assumenda autem sequi expedita quae reiciendis labore vitae aspernatur eaque repellat quis.</p>
            </div>
        </div>
<div class="btns">

的CSS ---

html, body {
    height: 100%;
    overflow: hidden;
}
body {
    background-color: rgb(245, 246, 247);
    width: 100%;
    display: table;
}
.con {
    display: table-cell;
    vertical-align: middle;
}
.con2 {
    display: table;
    margin: auto;
}
.pop {
    min-width: 300px;
    border-radius:3px;
    border:1px solid rgb(218, 218, 218);
    position: relative;
    height: 250px;
    background-color: rgb(252, 253, 255);
}
.pop header {
    height: 50px; line-height: 50px;
    background-color: rgb(248, 248, 248);
    position: relative;
    padding-left: 15px;
    font-family: sans-serif;
    font-weight: bold;
    color: rgb(123, 123, 134);;
}
.pop header:after {
    content:'';
    position: absolute;
    height: 1px;
    background: rgb(207, 207, 207);
    left: 0;
    width: 100%;
    bottom: 0;
}
.btn {
    -webkit-transition: all .2s ease-in-out;;
    height: 48px;
    width: 95px;
    background-color: rgb(117, 117, 117);
    border-radius:3px;
    text-align: center;
    line-height: 48px;
    font-family: sans-serif;
    color:white;
    font-size: 15px;
    display: inline-block;
    margin: 0 5px;
    cursor:default;
}

.btns {
    width:300px;
    text-align: center;
    margin: auto;
    margin-top: 11px;
}
.btn:hover { -webkit-transform: scale(1.1); }
.dec {background-color: rgb(70, 182, 151); }
.txt {
    /* border:1px solid; */
    text-align: center;
    padding: 15px;

}
.txt p {
    text-align: left;
    width: 250px;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 22px;
    margin: auto;
}

0 个答案:

没有答案