在鼠标悬停时使用CSS转换闪烁div

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.

我正在推特(还有Facebook like)按钮上做一个div。我想让它在div(按钮)上方一悬停就向上移动，这样你就可以按下真正的tweet按钮。我试过以下。

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.

我不知道哪里出了问题。它看起来就像我一悬停，它就会移动，但是如果我再移动一个像素，它就必须做一个新的计算，这会引起闪烁。

1 个解决方案

#1

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

技巧是在父悬浮上移动子元素

Demo

演示

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;
}

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包含在一个div元素中，该元素是位置:相对;之后我们在跨度上使用过渡来帮助我们平滑动画的流动，现在我们使用位置:绝对;左:0，这将把元素叠加在一起，而不是我们使用z-index来确保第一个元素覆盖第二个元素。

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.

最后，我们移动第一个span，我们使用第n -of-type(1)来选择它，它是第一个嵌套在div中的子元素，我们分配顶部:-40px;当父div悬置时，它将传输。

#1