在悬停时使用CSS变换时闪烁div [英] Flickering div when using CSS transform on hover

问题描述

我在tweet（也是Facebook like）按钮的顶部制作一个 div 。我希望在鼠标悬停在 div （按钮）上方之后，它就会向上移动，这样您可以真正按下实际的tweet按钮。我尝试了以下操作。

I'm making a div on top of the tweet (and also the Facebook like) button. I want it to move up as soon as I hover above the div (button) so you can actually press the real tweet button. I've tried the following.

HTML：

<div class="tweet-bttn">Tweet</div>         
<div class="tweet-widget">
    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

CSS：

.tweet-bttn{
    position: relative;
    top: -30px;
    left: -10px;
    display:block;
    opacity: 1;
    width: 80px;
    padding: 10px 12px;
    margin:0px;
    z-index:3;}

.tweet-bttn:hover{
    -webkit-animation-name: UpTweet;
    -moz-animation-name: UpTweet;
    -o-animation-name: UpTweet;
    animation-name: UpTweet;
    -webkit-animation-duration:.5s;
    -moz-animation-duration:.5s;
    animation-duration:.5s;
    -webkit-transition: -webkit-transform 200ms ease-in-out;
    -moz-transition: -moz-transform 200ms ease-in-out;
    -o-transition: -o-transform 200ms ease-in-out;
    transition: transform 200ms ease-in-out;}

@-webkit-keyframes UpTweet {
    0% {
        -webkit-transform: translateY(0);
    }   
    80% {
        -webkit-transform: translateY(-55px);
    }
    90% {
        -webkit-transform: translateY(-47px);
    }
    100% {
        -webkit-transform: translateY(-50px);
    }
    ... and all other browser pre-fixes.
}

我不知道发生了什么问题。它看起来像，只要我悬停，它移动，但如果我再移动光标一个像素，它必须做一个新的计算，导致闪烁。

I'm not sure what's going wrong. It looks like that as soon as I hover, it moves, but if I move the cursor one more pixel, it has to do a new calculation which causes the flickering.

推荐答案

我不知道为什么你需要动画，当你可以简单地实现上述使用转换

I don't know why you need animations for this when you can simply achieve the above using transitions

诀窍是移动父元素上的子元素

The trick is to move the child element on parent hover

演示

div {
    margin: 100px;
    position: relative;
    border: 1px solid #aaa;
    height: 30px;
}

div span {
    position: absolute;
    left: 0;
    width: 100px;
    background: #fff;
    top: 0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div span:nth-of-type(1) {
/* Just to be sure the element stays above the 
   content to be revealed */
    z-index: 1;
}

div:hover span:nth-of-type(1) { /* Move span on parent hover */
    top: -40px;
}

---

span 位于 div c>
，然后在 span 上使用 transition ，这将有助于我们平滑 animation ，现在我们使用 position：absolute; 和 left：0; ，这将堆栈元素，而不是使用 z-index 来确保第一个元素覆盖第二个元素。

---

Explanation: Firstly we wrap span's inside a div element which is position: relative; and later we use transition on span which will help us to smooth the flow of the animation, now we use position: absolute; with left: 0;, this will stack elements on one another, than we use z-index to make sure the first element overlays the second.

现在最后，我们移动第一个 span ，我们使用 nth-of-type（1），它只是嵌套在 div 中的第一个子类，我们分配 top：-40px; ，当父项 div 被转移时，它将转移。

Now at last, we move the first span, we select that by using nth-of-type(1), which is nothing but first child of it's kind which is nested inside div, and we assign top: -40px; which will transit when the parent div is hovered.

这篇关于在悬停时使用CSS变换时闪烁div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！