使用css3过渡滑出标签

I have the following codepen, this is a basic positioned label with the number and marker text:

我有以下codepen,这是一个带有数字和标记文本的基本定位标签:

<span href="#" class="part-marker">
  <a href="#" class="marker-label">1<span>&nbsp;marker text</span></a>
</span>

How can I get it to slide out on hover using css3 transitions? I've tried using this with no success??

如何使用css3过渡让它在悬停时滑出?我试过用这个没有成功?

3 个解决方案

#1

See below a simplified version- the crux here being that you cant make a transition on properties that don't scale, so where you have the element going from display:none t inline-block it simply goes from hidden to shown as there are no intermediary points. What you can do instead is use a combination of max-width and overflow as outlined below.

请参阅下面的简化版本 - 这里的关键是您无法在不缩放的属性上进行转换,因此您可以从显示中获取元素:none t inline-block它只是从隐藏到显示,因为没有中间点。您可以做的是使用最大宽度和溢出的组合,如下所述。

Demo Fiddle

HTML

<div> <a href='#'>1</a>
 <span>Label</span>
</div>

CSS

a {
    display:inline-block;
    background:blue;
    color:white;
    padding:0 5px;
}
div {
    position:relative;
}
div span {
    position:absolute;
    display:inline-block;
    max-width:0;
    overflow:hidden;
    transition:all 1s ease-in;
}
a:hover+span {
    max-width:100%;
}

#2

Take a look at this code:

看看这段代码:

HTML

<a href="#" class="marker-label" text="marker text">
    1
</a>

CSS

.marker-label {
    display:block;
    background:blue;
    color:white;
    padding:4px 8px;
    font-size:1em;
    line-height:1;
    position:relative;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    width:10px;
}
.marker-label:hover {
    width:80px;
}
.marker-label:after {
    content:attr(text);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    position:absolute;
    left:-100px;
}
.marker-label:hover:after {
    left:20px;
}

And here is a FIDDLE

这是一个FIDDLE

#3

You can use a negative text-indent too : http://codepen.io/anon/pen/xalDc/

您也可以使用否定文本缩进:http://codepen.io/anon/pen/xalDc/

span { 
    text-indent:-150px;
    overflow:hidden;
    display:inline-block;/* triggers layout */
    transition: all 1s ease-in-out;
    /* position:absolute ; not needed since a is already so */
    }
    &:hover {
        span {
            text-indent:0;
        }
    }