I cannot hide or destroy it animated. My code: <div class="highlight highlight

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Cannot hide or destroy animated about panes HOT 6 CLOSED

BerkeAras commented on May 27, 2024

Cannot hide or destroy animated

from panes.

Comments (6)

roman-rr commented on May 27, 2024

@BerkeAras Thank you for issue.
I still need to handle error handling to prevent such type of issues, but in general the issue in your code structure.

With this lines you create Pane new class:

var myPane = new CupertinoPane('.cupertino-pane', {
  backdrop: true
});

For showPane() its works, because you call myPane.present() method (which is necessary to render pane).
For hidePane() you once again create new Pane class, but myPane.present() is not called.

This will works without error:

function hidePane() {
    var myPane = new CupertinoPane('.cupertino-pane', {
        backdrop: true
    });
    myPane.present();
    myPane.hide();
}

But with your code you will not use same Pane, because you re-create Pane class in each function.

Finally, the correct implementation for you is move pane one-level out of scope:

const myPane = new CupertinoPane('.cupertino-pane', {
        backdrop: true
});

function showPane() {
    myPane.present({
        animate: true
    });
}
function hidePane() {
    myPane.hide();
}

from panes.

BerkeAras commented on May 27, 2024

But then I get this: `Uncaught TypeError: myPane.hide is not a function`

from panes.

roman-rr commented on May 27, 2024

@BerkeAras Explore this simple html example, you can save as html and open in browser.

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>var exports = {"__esModule": true};</script> <!-- Required if exports not defined earlier -->
        <script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>
    </head>
    <body>
        <button onclick="showPane();">Show</button>
        <button onclick="hidePane();">Hide</button>
        <div class="cupertino-pane">
            <h1>Header</h1>
            <div class="content">Content</div>
        </div>
        <script>
            var myPane = new CupertinoPane('.cupertino-pane', { /* ... */ });

            function showPane() {
                myPane.present({
                    animate: true
                });
            }

            function hidePane() {
                myPane.hide();
            }
        </script>
    </body>
</html>