Преобразование CSS translate не работает с javascript

ProgramBox

Преобразование CSS translate не работает с javascript

Post author:admin
Запись опубликована:23 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

 const openBtn = document.querySelector('.open')
const closeBtn = document.querySelector('.close')
const navContainer = document.querySelector('.nav-container')

openBtn.addEventListener('click', () => {
    openBtn.classList.add('hide')
    closeBtn.classList.remove('hide')
    navContainer.classList.remove('.show-nav')
})

closeBtn.addEventListener('click', () => {
    closeBtn.classList.add('hide')
    openBtn.classList.remove('hide')
    navContainer.classList.add('.show-nav')
})

 @import url('https://fonts.googleapis.com/css2?family=Robotoamp;display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: 0;
    font-family: 'Roboto', sans-serif;
}
a{
    text-decoration: none;
    color: black;
}
li{
    list-style: none;
}
.nav-btn{
    position: absolute;
    right: 0%;
    border: none;
    background: transparent;
    margin: 10px;
    cursor: pointer;
}
.hide{
    display: none;
}
body{
    overflow: hidden;
}
.nav-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    transform: translateX(-100%);
    transition: all 0.2s ease;
}
.show-nav{
    transform: translateX(0%);
}
h1{
    margin: 10px;
    font-size: 40px;
}
h1 span{
    color: cornflowerblue;
}
.links{
    margin: 10px;
    margin-left: 24px;
    font-size: 32px;
}
.links a{
    line-height: 48px;
}
.social{
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0%;
    margin-bottom: 10px;
}
.social a{
    margin-right: 6px;
    margin-left: 24px;
}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT WB0QEEqLprO NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <button class="nav-btn open">
        <i class="fas fa-bars fa-3x"></i>
    </button>
    <button class="nav-btn close hide">
        <i class="fas fa-times fa-3x"></i>
    </button>
    <nav class="nav-container">
        <h1>
            Side
            <span>
                Bar
            </span>
        </h1>
        <ul class="links">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Projects</a>
            </li>
            <li>
                <a href="#">Contacts</a>
            </li>
        </ul>
        <ul class="social">
            <li>
                <a href="#">
                    <i class="fab fa-twitter fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-youtube fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-github fa-lg"></i>
                </a>
            </li>
        </ul>
    </nav>
</body>
</html>

Я пытался создать боковую панель с помощью html, css и javascript. У меня возникла проблема с отсутствием боковой панели. Я хочу, чтобы отображалась боковая панель, добавив класс ‘.show-nav’, который сбрасывает преобразование ‘.nav-container’ обратно на 0%. Добавляется класс ‘.show-nav’, но свойства, которые он содержит, не обновляют стиль.

Ответ №1:

В вашем коде были некоторые ошибки, такие как navContainer.classList.remove('.show-nav') , обратите внимание на точку в методе удаления. Кроме того, в вашем css есть некоторые несоответствия.

 const openBtn = document.querySelector('.open')
const closeBtn = document.querySelector('.close')
const navContainer = document.querySelector('.nav-container')

openBtn.addEventListener('click', () => {
    openBtn.classList.add('hide')
    closeBtn.classList.remove('hide')
    navContainer.classList.add('show-nav')
})

closeBtn.addEventListener('click', () => {
    closeBtn.classList.add('hide')
    openBtn.classList.remove('hide')
    navContainer.classList.remove('show-nav')
})

 @import url('https://fonts.googleapis.com/css2?family=Robotoamp;display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: 0;
    font-family: 'Roboto', sans-serif;
}
a{
    text-decoration: none;
    color: black;
}
li{
    list-style: none;
}
.nav-btn{
    position: absolute;
    right: 0%;
    border: none;
    background: transparent;
    margin: 10px;
    cursor: pointer;
}
.hide{
    display: none;
}
body{
    overflow: hidden;
}
.nav-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    height: 100vh;
    background: pink;
    transform: translateX(-100%);
    transition: all 0.2s ease;
}
.show-nav{
    transform: translateX(-10%);
}
h1{
    margin: 10px;
    font-size: 40px;
}
h1 span{
    color: cornflowerblue;
}
.links{
    margin: 10px;
    margin-left: 24px;
    font-size: 32px;
}
.links a{
    line-height: 48px;
}
.social{
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0%;
    margin-bottom: 10px;
}
.social a{
    margin-right: 6px;
    margin-left: 24px;
}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT WB0QEEqLprO NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <button class="nav-btn open">
        <i class="fas fa-bars fa-3x"></i>
    </button>
    <button class="nav-btn close hide">
        <i class="fas fa-times fa-3x"></i>
    </button>
    <nav class="nav-container">
        <h1>
            Side
            <span>
                Bar
            </span>
        </h1>
        <ul class="links">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Projects</a>
            </li>
            <li>
                <a href="#">Contacts</a>
            </li>
        </ul>
        <ul class="social">
            <li>
                <a href="#">
                    <i class="fab fa-twitter fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-youtube fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-github fa-lg"></i>
                </a>
            </li>
        </ul>
    </nav>
</body>
</html>

Ответ №2:

удалите te «.» в свой classList.add и .remove . вам не нужен идентификатор класса, потому что вы уже объявляете его. также после тестирования вашего кода я обнаружил, что вы не можете закрыть боковую навигацию. это потому, что ширина распространяется на всю ширину страницы, закрывая вашу кнопку закрытия. вы можете исправить это, уменьшив его ширину или добавив этот код, как я сделал в этом фрагменте

 button {
    z-index: 10
}

 const openBtn = document.querySelector('.open')
const closeBtn = document.querySelector('.close')
const navContainer = document.querySelector('.nav-container')

openBtn.addEventListener('click', () => {
    openBtn.classList.add('hide')
    closeBtn.classList.remove('hide')
    navContainer.classList.add('show-nav')
})

closeBtn.addEventListener('click', () => {
    closeBtn.classList.add('hide')
    openBtn.classList.remove('hide')
    navContainer.classList.remove('show-nav')
})

 @import url('https://fonts.googleapis.com/css2?family=Robotoamp;display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: 0;
    font-family: 'Roboto', sans-serif;
}
a{
    text-decoration: none;
    color: black;
}
li{
    list-style: none;
}
.nav-btn{
    position: absolute;
    right: 0%;
    border: none;
    background: transparent;
    margin: 10px;
    cursor: pointer;
}
.hide{
    display: none;
}
body{
    overflow: hidden;
}
.nav-container{
    display: flex;
    background: blue;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    transform: translateX(-100%);
    transition: all 0.2s ease;
}
.show-nav{
    transform: translateX(0%);
}
h1{
    margin: 10px;
    font-size: 40px;
}
h1 span{
    color: cornflowerblue;
}
.links{
    margin: 10px;
    margin-left: 24px;
    font-size: 32px;
}
.links a{
    line-height: 48px;
}
.social{
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0%;
    margin-bottom: 10px;
}
.social a{
    margin-right: 6px;
    margin-left: 24px;
}

button {
  z-index: 10;
}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT WB0QEEqLprO NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <button class="nav-btn open">
        <i class="fas fa-bars fa-3x"></i>
    </button>
    <button class="nav-btn close hide">
        <i class="fas fa-times fa-3x"></i>
    </button>
    <nav class="nav-container">
        <h1>
            Side
            <span>
                Bar
            </span>
        </h1>
        <ul class="links">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Projects</a>
            </li>
            <li>
                <a href="#">Contacts</a>
            </li>
        </ul>
        <ul class="social">
            <li>
                <a href="#">
                    <i class="fab fa-twitter fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-youtube fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-github fa-lg"></i>
                </a>
            </li>
        </ul>
    </nav>
</body>
</html>