CSS：在悬停时从左到右动画文本[提供小提琴]答案

【问题标题】：CSS: Animating text from left to right on hover [fiddle provided]CSS：在悬停时从左到右动画文本[提供小提琴]
【发布时间】：2016-01-30 15:07:25
【问题描述】：

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

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

悬停元素显示图标的文本

从左到右的文本会很棒。

当前

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/

【问题讨论】：

帮您提琴会容易得多..
@LiranBo 好吧。提供。
左=>右是什么意思？文本对齐？据我所知，您无法为文本对齐设置动画，但您可以制作菜单项 position: absolute 并将 right 属性设置为 0 以将元素推送到容器的最右侧
@MattiaNocerino 我基本上需要这个。 jsfiddle.net/gionaf/SNycF

标签： jquery css css-transitions transition

【解决方案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;   
}

【讨论】：

哇，真不错。竖起大拇指！
谢谢先生！不过要感谢之前发的fiddle，因为它给了我灵感啊啊啊！
我尝试在此基础上实现自己的解决方案。这对我来说完全搞砸了。 =)

【解决方案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

【讨论】：

【解决方案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;          
}

【讨论】：

我需要 i18n 支持。 {{i18n-t 'General.myMenu'}}