@MariPolina

Как при нажатии на кнопку сделать плавное перемещение блока div?

Можно попробовать и с js но у меня ничего не получилось,
отдельные библиотеки тут для другой джавы , но опять же даже со swiper не смогла настроить ,
хотелось бы чтобы при нажатии на одну из кнопок , блок minii плавно переместился прямо под низ нажатой кнопки

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="genere.css">
    <link rel="shortcut icon" href="inan/favicon.ico" corssorigin>
    <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
    <script src="proect.js"></script>
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"  />
    <title>FULL-HD-GENERE</title>
</head>
<body>
<div class="tema">
    <ul class="tema-ul">
        <li><button type="button" class="buttong" onclick="location.href=''">Action</button></li>
        <li><button type="button" class="buttong" onclick="location.href=''">Drama</button></li>
        <li><button type="button" class="buttong" onclick="location.href=''">Horror</button></li>
        <li><button type="button" class="buttong" onclick="location.href=''">Mistory</button></li>
        <li><button type="button" class="buttong" onclick="location.href=''">Adventure</button></li>
        <li><button type="button" class="buttong" onclick="location.href=''">Fantasy</button></li>
    </ul>
</div>

<div class="minii"></div>
<div class="tema-mv"></div>


</body>
</html>


.tema{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}

.tema-ul li{
   display: inline;
}

.buttong{
    background-color: #000000;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 1.8rem;
    margin: 0px -5px;
    padding: 20px 50px;
    cursor: pointer;
    transition: all ease 0.3s;
}

.tema-ul button:hover{
    background-color: rgba(84, 0, 0, 0.514);
    transition: all ease 0.3s;
}

.minii{
    position: absolute;
    z-index: -1;
    background-color:#0d0d0d ;
    width: 202px;
    height: 60px;
    top: 245px;
    left: 316px;
    transition: ease 2s;
    
}

.active{
    left: 200px;
}

.tema-mv{
    background-color: #0d0d0d;
    width: 1288px;
    height: 500px;
    margin-top: 55px;
    margin-left: 316px;
    position: relative;
}


const buttong=document.querySelector('.buttong');
const minii=document.querySelector('.minii');

buttong.addEventListener('click',function(){
    minii.classList.add('active');
});
  • Вопрос задан
  • 120 просмотров
Решения вопроса 1
sergski
@sergski
web-developer
Немного поправил ваш код
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы