Блог

Главная - Вопросы по программированию - Я хочу использовать переход в тот момент, когда две иконки переключаются друг с другом

Я хочу использовать переход в тот момент, когда две иконки переключаются друг с другом

#css

#css

Вопрос:

Я новичок, я много искал ответ в Интернете, но ни одному из них не удалось прояснить, почему переход не работает. 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;
}

После того, как иконки переключаются друг с другом, я хотел сделать это с эффектом перехода. Заранее спасибо!

Комментарии:

1. Похоже, вы используете какую-то библиотеку для material design. Было бы легче помочь вам, если бы вы предоставили рабочую скрипку.

2. Вы полностью перезаписываете один элемент li другим. Переходы CSS работают со свойствами CSS. Вам нужно сохранить оба элемента li в DOM и передать что-то вроде непрозрачности и поворота. Вы хотите, чтобы элемент меню был скрыт, когда отображается элемент отмены, или вы хотите показать / скрыть только элемент отмены?

Ответ №1:

Переход не происходит, потому что элемент полностью удален / заменен другим onclick.

Это свойства CSS, которые переходят, и браузер думает, что у него есть совершенно новый элемент, а не тот, который нужно каким-то образом перенести.

Что мы делаем, так это постоянно иметь оба элемента li в документе, но один из них будет скрыт. Чтобы сделать это постепенно, мы можем использовать opacity: 0 наряду с поворотом в новом классе, который здесь называется faded .

При щелчке мы не заменяем элементы li, но устанавливаем для того, на который не был нажат, значение class faded — он будет вращаться и станет невидимым с непрозрачностью: 0, и мы удаляем класс faded из другого элемента li, чтобы он возвращался к нормальному состоянию и с нормальной непрозрачностью.

В Javascript есть удобная функция toggle для добавления и удаления класса, поэтому нам не нужно запоминать, какой элемент скрыт, а какой находится в поле зрения — достаточно иметь или не иметь исчезнувший класс.

Вот фрагмент. Обратите внимание, что телу был присвоен цвет фона, чтобы мы могли видеть белое меню и белую рамку. Также у меня нет доступа к любым значкам, которые вы используете, поэтому элементы 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>