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

Question

我有一个汉堡包(三个水平条)图标，我想将其从 float:left 更改为 float:right 但动画流畅。

我不会使用 jQuery 但我可以使用 JavaScript，所以我有这个小函数可以在单击图像时更改 float 状态:

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


menuButton.onclick = function () {

    menuButton.style.float =  "right";
}

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

一个正在运行的演示:

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


menuButton.onclick = function () {

    menuButton.style.float =  "right";
}

   nav {
        background: pink;
        height: 60px;
    }

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

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

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/