页面转换不起作用（jQuery mobile）

Question

我正在尝试学习jQuery mobile。我尝试使用data-transition用于页面转换，但它仅显示其他转换的默认fade转换，即使我使用其他转换，例如pop，flip等< / p>

我可以查看jQuery docs

上显示的所有转场

这是我的html正文：

<div data-role="page" id="page1" data-title="Page 1">
    <div data-role="header">
        <h1>Heading 1</h1>
    </div>

    <div data-role="content">
        <p>Hi! I'm the content in the page</p>
        <!-- Have used `data-transistion` below -->
        <a href="#page2" data-transistion="flip">Page 2</a>
        <br/>
        <a href="#popup" data-rel="dialog">Pop Up</a>
    </div>

    <div data-role="footer">
        <h1>Footer 1</h1>
    </div>
</div>

<div data-role="page" id="page2" data-theme="b" data-title="Page 2">
    <div data-role="header">
        <h1>Heading 2</h1>
    </div>

    <div data-role="content">
        <p>Hi! I'm the content in the page 2</p>
        <a href="#page1">Page 1</a>
        <a data-role="button" data-rel="back">Back</a>
    </div>

    <div data-role="footer">
        <h1>Footer 2</h1>
    </div>
</div>

<div id="popup" data-theme="b" data-title="Pop Up">
    <div data-role="header">
        <h1>Pop Up</h1>
    </div>

    <div data-role="content">
        <p>Hi! I'm the content in the Pop Up</p>
        <a href="#page1">Page 1</a>
    </div>

    <div data-role="footer">
        <h1>Pop Up</h1>
    </div>
</div>

我做错了什么？