Форум

sssema96 · #1 (**permalink**) 14.03.2021, 13:14

<div class="led2" style="background: black; width: 40px; height: 16px "></div>
<button class="show-image" type="button" id="clickGreen"></button>

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

рони · #2 (**permalink**) 14.03.2021, 15:32

sssema96,
https://developer.mozilla.org/en-US/...nction/scale()

sssema96 · #3 (**permalink**) 14.03.2021, 16:28

рони,
Спасибо, а как при этом сделать это увлечение анимированным?

рони · #4 (**permalink**) 14.03.2021, 16:45

sssema96,
https://developer.mozilla.org/en-US/...CSS/transition

рони · #5 (**permalink**) 14.03.2021, 17:27

sssema96,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .led2 {
            background-color: black;
            width: 40px;
            height: 16px;
            transition: 1s;
        }

        .active {
            transform: scale(2);
        }
    </style>
    <script>
        document.addEventListener("click", ({ target }) => {
            target = target.closest(".show-image");
            if (target) {
                document.querySelector(".led2").classList.toggle("active")
            }
        })
    </script>
</head>

<body>
    <div class="led2"></div>
    <button class="show-image" type="button" id="clickGreen">Click me</button>
</body>

</html>

sssema96 · #6 (**permalink**) 14.03.2021, 18:18

рони,
Спасибо, только хотелось что бы по клику кнопки блок увеличился с анимацией и назад вернулся в исходное состояние уже без клика по кнопке. И ещё замечена проблема что данный скрипт почему-то влияет на работу

.led2:hover

рони · #7 (**permalink**) 14.03.2021, 18:31

sssema96,
а про css почитать по ссылкам выше?

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .led2 {
            background-color: black;
            width: 40px;
            height: 16px;
            
        }

        .active {
           animation: 5s big;
        }
  @keyframes big {

    50% {
        transform: scale(3);
    }
}

    </style>
    <script>
        document.addEventListener("click", ({ target }) => {
            target = target.closest(".show-image");
            if (target) {
                let div = document.querySelector(".led2");
                div.classList.remove("active");
                document.documentElement.clientHeight;
                div.classList.add("active")
            }
        })
    </script>
</head>

<body>
    <div class="led2"></div>
    <button class="show-image" type="button" id="clickGreen">Click me</button>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript