当两个图标互相切换时，我想使用一个过渡。

Question

我是个初学者，我在互联网上搜索了很多答案，但没有一个能解释为什么过渡不起作用。HTML：

<li><i class="material-icons menu-bar" id="menu-bar">menu</i></li>
<ul class="menu-bar-content hide" id="menu-bar-content">

这是我的Js：

const menuBar = document.getElementById('menu-bar');
const menuBarContent = document.getElementById('menu-bar-content');
var menuOpen = false;
menuBar.addEventListener('click' , menuBarBtn)
function menuBarBtn() {
    if ( menuOpen == false) {
        menuBar.innerHTML = '<li><i class="material-icons undo-icon">undo</i></li>';
        menuBarContent.className = 'menu-bar-content';
        menuOpen = true;
    }
    else {
        menuBar.innerHTML = '<li><i class="material-icons menu-bar" id="menu-bar">menu</i></li>';
        menuBarContent.className = 'menu-bar-content hide'
        menuOpen = false;
    }
};

这是我的Css：

.menu-bar {
    display: inline-block;
    vertical-align: middle;
    float: right;
    color: white;
    margin: -1.45% 0.7%;
    font-size: 23px !important;
    transition: .4s;
}

.undo-icon {
    display: inline-block;
    vertical-align: middle;
    float: right;
    color: #1ec7b9;
    margin: 0.9% 3%;
    transform: rotateZ(43.2deg);
    font-size: 14px !important;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 70%;
    padding: 1.5px;
    transition: .4s;
}

图标互相切换后，我想用转换效果来完成它。提前谢谢你！

Answer 1

转换没有发生，因为元素被完全删除/替换为另一个onclick。

转换的是CSS属性，浏览器认为它有一个全新的元素，而不是以某种方式转换的元素。

我们所做的是始终在文档中包含两个li元素，但其中一个元素将被隐藏。为了逐步做到这一点，我们可以在一个新的类中使用不透明度:0和旋转，这个类在这里被称为褪色。

单击时，我们不会替换li元素，但是我们将未单击的元素设置为使类褪色--它将旋转，并以不透明度结束不可见:0，我们从其他li元素中删除已褪色的类，这样它就会旋转回普通的和正常的不透明度。

Javascript有一个方便的函数，切换，用于添加和删除一个类，这样我们就不必记住哪些元素是隐藏的，哪些元素在视图中--让类褪色就足够了。

这是片段。注意，身体已经给出了一个背景颜色，这样我们就可以看到白色菜单和白色边框。此外，我没有访问任何图标，您正在使用，所以i元素被替换为跨度只是为了这个演示。

​

const menuBar = document.getElementById('menu-bar');
const undoBar = document.getElementById('undo-bar');

menuBar.addEventListener('click' , menuBarBtn);
undoBar.addEventListener('click' , menuBarBtn);

function menuBarBtn() {
  menuBar.classList.toggle('faded');
  undoBar.classList.toggle('faded');
};

body {
    background-color: gray; /* just for this test so we can see the white menu */
    }
.menu-bar {
    display: inline-block;
    vertical-align: middle;
    float: right;
    color: white;
    margin: -1.45% 0.7%;
    font-size: 23px !important;
    transition: .4s;
}
.undo-icon {
    display: inline-block;
    vertical-align: middle;
    float: right;
    color: #1ec7b9;
    margin: 0.9% 3%;
    font-size: 14px !important;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 70%;
    padding: 1.5px;
    transition: .4s;
}
.faded { /* added this so when an element has class="faded" it cannot be seen and it is rotated */
    opacity: 0;
    transform: rotateZ(43.2deg);
}

<ul class="menu-bar-content" id="menu-bar-content" style="margin-top:30px;"> <!-- added just for this tesmargin t so we could see the white menu word in the snippet -->
  <li><span class="menu-bar" id="menu-bar">menu</span></li> <!-- remember to put back the <i icon calls in here in place of the spans -->
  <li><span class="menu-bar undo-icon faded" id="undo-bar">undo</span></li> <!-- ...and we start this off as faded so it isn't seen to begin with -->
</ul>

​