Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Transition parent opacity with bootstrap btn #505

Open
cpprust opened this issue Dec 28, 2023 · 0 comments
Open

Transition parent opacity with bootstrap btn #505

cpprust opened this issue Dec 28, 2023 · 0 comments

Comments

@cpprust
Copy link

cpprust commented Dec 28, 2023

In the following code, the transition opacity to 0 finish immediately instead of 0.5s.
It only works correctly if the btn class is remove from the button. (line 11)

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>
<body>
    <div class="parent" style="background-color: red; padding: 5px;">
        <span>parent</span>
        <button class="child btn btn-danger" style="background-color: orange; padding: 5px;" _="
            on click
                transition the closest .parent opacity to 0 over 0.5s
                remove closest .parent
        ">
            <span>child</span>
        </button>
    </div>
</body>
</html>

[Note]

  • Test on firefox 121.0 and chromium 119.0.
  • Insert wait 0.5s before the line of remove closet .parent (insert to line 14) it will work on firefox but not on chrome. (It is not correct way to use hyperscript anyway)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@cpprust