让 display:none elem slideRight();答案

【问题标题】：Let display:none elem slideRight();让 display:none elem slideRight();
【发布时间】：2015-04-24 02:19:04
【问题描述】：

我正在尝试在 CSS 中创建一个菜单，其中只有图标作为按钮可见，但是当您将鼠标悬停在它们上时，必须显示图标旁边的文本。问题是我想用类似 slideDown() 的效果来动画显示文本的效果，然后才向右。

HTML（包括图标的字体）：

<body>
<nav>
    <ul>
        <li><a href="#"><i class="fa fa-home"></i><span>Home</span></a>
        </li>
        <li><a href="#"><i class="fa fa-users"></i><span>Team</span></a>
        </li>
        <li><a href="#"><i class="fa fa-comments"></i><span>Management</span></a>
        </li>
        <li><a href="#"><i class="fa fa-cog"></i><span>Settings</span></a>
        </li>
        <li><a href="#"><i class="fa fa-envelope"></i><span>Mail Jobs</span></a>
        </li>
    </ul>
</nav>
</body>

CSS：

nav {
    position:fixed;
    top:20px;
    background:#701313;
    border-radius:0 30px 30px 0;
    font-family:'Open Sans', sans-serif;
}
nav ul {
    margin:0px;
    padding:0px 20px;
    width:56px;
}
nav ul li {
    font-size:23px;
    display:block;
    width:3000px;
    margin:40px 0;
}
nav ul li a {
    background:#2e2e2e;
    border-radius: 30px;
    padding:15px 17px;
    color:#FFF;
    text-decoration: none;
}
nav ul li a:hover span {
    display:inline;
}
nav ul li i {
    font-size:28px !important;
}
nav ul li span {
    display:none;
    padding:0 20px;
}

我还添加了一个JSFiddle。

理想的解决方案是纯 CSS，但我不确定这是否可能。因此，如果不可能，使用 jQuery 的解决方案将是一个很好的结果。

【问题讨论】：

你不能为不存在的元素制作动画。
嗯，该项目在 DOM 中，但只有 display:none; 的属性，就像您在 jQuery 中调用 slideUp() 函数时元素所具有的一样。因此，基于这些知识，我认为这是可能的。我只是不知道怎么做。
是的，我应该说“盒子”而不是“元素”。该元素不会生成框，因此虽然您可以调用slideUp()，但我不确定它是否会产生任何效果。
您对如何在不可见时将其装箱，但在隐藏时仍不能保留其原始空间有任何想法吗？ visibility 的解决方法会以某种方式起作用吗？还是您认为我想要的根本无法实现？
我相信使用 javascript 是可以实现的。

标签： jquery html css transitions

【解决方案1】：

您可以使用 CSS3 动画来做到这一点，但您必须为 a 元素指定固定宽度。这将使它不那么动态。

jQuery 可用于更新宽度值，CSS3 动画将由此触发。我已经修改了你的 CSS 并添加了简单的 JS 函数来更新宽度值。

    nav ul li a {
        background:#2e2e2e;
        border-radius: 30px;
        padding:15px 0;
        color:#FFF;
        text-decoration: none;
        overflow:hidden;
        width:60px;
        display:inline-block;
        -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
        transition: width 0.5s; 
    }
    nav ul li a:hover {
    }

    nav ul li a:hover span {
        opacity: 1;
    }
    nav ul li i {
        margin-left:16px;
        font-size:28px !important;
    }
    nav ul li span {
       position:absolute;
        padding:0 20px;
        opacity: 0;
        -webkit-transition: opacity 0.9s; /* For Safari 3.1 to 6.0 */
        transition: opacity 0.9s;
    }

以及 Javascript 代码：

$(function(){
    $("nav ul li a").hover(function(){
        $(this).css("width", $(this).find("span").innerWidth() + 50);
    }, function(){
        $(this).css("width", 60);
    });
});

您需要包含 jQuery 库。
您可以在 CSS 中更改动画。

【讨论】：

这样一个很好的解决方案，尽可能少的 JS。感谢您的努力。