Question

我有一个hamburguer（三个水平条）图标我想从float: left更改为float:right，但动画流畅。

我不能使用jQuery，但我可以使用javascript，所以我有这个小函数，在点击图像时会改变浮动状态：

var menuButton = document.getElementById('menu-button');


menuButton.onclick = function () {

    menuButton.style.float =  "right";
}

所以这可行，但不是流畅的动画，我怎样才能使它成为流畅的动画？

正在运行的演示：

＆＃13;

var menuButton = document.getElementById('menu-button');


menuButton.onclick = function () {

    menuButton.style.float =  "right";
}

＆＃13;

   nav {
        background: pink;
        height: 60px;
    }

    nav #menu-button {
        margin: 20px 24px;
        display: inline;
        float: left;
    }

＆＃13;

    <nav id="nav-bar">
        <a href="#/index"><img id="menu-button"alt="menu icon" src="images/toggle-open.svg"></a>
    </nav>

＆＃13;

Answer 1

如果您知道容器的宽度，请不要使用float属性，margin-left：

a {
  margin-left: 0;
  transition: margin-left 1s ease-in-out;
}
a.right{
  margin-left: 400px; /* change for good value */
}

然后使用javascript

将right类添加到a元素中

https://jsfiddle.net/rd4h4s5h/

Answer 2

不幸的是，改变从左到右的浮动不能简单地使用任何当前技术进行动画处理，因为动画需要一个相对的锚点来执行计算。

您可以做的是将相对左浮动位置设置为近似右浮动位置（例如，通过增加左边距），并在完成后更改为右浮动。但实际上，最后一步是没有必要的，除了处理页面的未来布局更改（例如窗口调整大小，流体宽度站点）。

我能够使用CSS3过渡和marginLeft来实现这一点。

parentElement.parentElement中有一点hackery（爬上DOM树的两个级别），而-44px中则考虑了图标宽度和边距宽度，但是如果你愿意的话，你可以编写更复杂的编码这些解决方案（动态处理元素的实际宽度/边距）。

var menuButton = document.getElementById('menu-button');
menuButton.onclick = function () {
    var left = menuButton.parentElement.parentElement.clientWidth - 44;
    menuButton.style.marginLeft =  left+"px";
    window.setTimeout(function() {
        menuButton.style.float =  "right";
    }, 1000);
}

nav {
    background: pink;
    height: 60px;
}

nav #menu-button {
    margin: 20px 24px;
    display: inline;
    float: left;

    /* Width and height hack to represent missing image's height and width */
    width: 20px;
    height: 20px;

    /* CSS Transition added */
    -webkit-transition: margin-left 1s;
    transition: margin-left 1s;
}

<nav id="nav-bar">
    <a href="#/index"><img id="menu-button"alt="menu icon" src="images/toggle-open.svg"></a>
</nav>

用动画从左到右浮动图像？

2 个答案: