• Дата реєстрації: 09.07.2018
  • Повідомлень: 7
    • Репутація: 1

Тема: Transiton-delay для випадаючого меню

Доброго дня.  Вивчаю тему анімації і стикнувся з такою проблемою: мій задум - при натисненні на div.inside відразу повинне випадати підменю (transition-duration 0s для відображеня) і зникнути через три секунди (transition-delay 3s). Але виходить, що меню з"являється через 3 секунди. Що не так? *WALL* 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div.outside {border: 1px solid black;
        width: 50px;
        height: 20px;
        position: relative;
            
        }
        div.inside {
            position: absolute;
            top: calc(100%);
            left: -1px;
            visibility: hidden;
            border: 1px solid black;
            width: 60px;
            height: 60px;
            transition-delay: 1s;
        }
        div.outside:active { border-bottom: 1px solid white;}
        div.outside:active > div.inside{
            visibility: visible;
            transition-delay: 0;
        }
    </style>
</head>
<body>
    <div class="outside">Button<div class="inside"></div></div>
</body>
</html>

2 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 295
    • Репутація: 2723

Re: Transiton-delay для випадаючого меню

transition-delay встановлює delay для transition (логічно ж). А де у вас transition ?
Якось так:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div.outside {
            border: 1px solid black;
            width: 50px;
            height: 20px;
            position: relative;
        }
        div.inside {
            position: absolute;
            top: 100%;
            left: -1px;
            visibility: hidden;
            opacity: 0;
            border: 1px solid black;
            width: 60px;
            height: 60px;
            transition: visibility 3s, opacity 3s linear;
        }
        div.outside:active {
            border-bottom: 1px solid white;
        }
        div.outside:active > div.inside {
            visibility: visible;
            opacity: 1;
            transition: visibility 0s, opacity 0s linear;
        }
    </style>
</head>
<body>
    <div class="outside">Button<div class="inside"></div></div>
</body>
</html>

opacity можете самостійно прибрати.

Подякували: operspecgroup, 221VOLT2

leofun01 вебсайт