CSS：悬停时从左到右动画文本 [fiddle 已提供]

Question

我在从左到右设置文本动画时遇到问题。就我而言，没有一些黑客就没有出路。

这是我在初始加载时的导航。

将鼠标悬停在元素上会显示图标的文本

如果文本从左 => 右开始，那就太棒了。

当前

CSS

.menu-item { /* hide and position tooltip */
    opacity: 0;
    transition: opacity 0s ease-in 600ms, opacity 600ms;
}

.menu-item-hover:hover .menu-item {
    opacity: 1;
    transition: opacity 0s ease-in 600ms, opacity 600ms;
}

HTML（车把）

<div class="menu-item-hover">
     <i class="icon-my-menu my-menu"></i>
         <span>
              <span class="menu-item">
                   {{i18n-t 'General.myMenu'}}
              </span>
         </span>
</div>

Link 到 fiddle : http://jsfiddle.net/kristjanrei/kLd7obvg/

以及文本的动画方式

http://jsfiddle.net/gionaf/SNycF/

Answer 1

试试这个

   <div class="menu-item-hover">
        icon    
    </div>                     

.menu-item-hover:hover:before {              
    opacity: 1;               
    Content:"my-menu";              
    transition: opacity 0s ease-in 600ms, opacity 600ms;          
}

Answer 2

要从左到右输入文本，只需将其作为绝对位置并更改 left 值

.menu-item { /* hide and position tooltip */
    opacity: 0;
    left:-50px;
    position:absolute;
    top:10px;
    transition: all 600ms;
}

.menu-item-hover:hover .menu-item {
    opacity: 1;
    position:absolute;
    top:8px;
    left:40px;
    transition: all 600ms;
}

<div class="menu-item-hover">
    icon
    <span>
        <span class="menu-item">
          my-menu
        </span>
    </span>
</div>

FIDDLE

Answer 3

我们开始了

http://jsfiddle.net/kLd7obvg/7/

我刚刚使用了 :after 伪元素，将其设为绝对元素，覆盖其父元素，为其宽度使用过渡

.menu-item { /* hide and position tooltip */
    opacity: 0;
    transition: opacity 0s ease-in 600ms, opacity 600ms;
    position: relative;
}

.menu-item:after{
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: width 600ms;
}

.menu-item-hover:hover .menu-item {
    opacity: 1;
    transition: opacity 0s ease-in 600ms, opacity 600ms;
}

.menu-item-hover:hover .menu-item:after{
    width: 0;   
}

CSS：悬停时从左到右动画文本 [fiddle 已提供]

CSS: Animating text from left to right on hover [fiddle provided]

css

jquery

transition

css-transitions