Question

我遇到了从左到右动画文字的问题。就我而言，没有一些黑客就没有出路。

这是我初次加载时的导航。

悬停元素会显示图标

的文本

从左边有一个文字真是太棒了=＆gt;右。

当前

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>

链接到小提琴：http://jsfiddle.net/kristjanrei/kLd7obvg/

文字的动画方式

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

Answer 1

我们去了

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

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

试试这个

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

CSS：在悬停[提供小提琴]

3 个答案: