ElementTransitions对jquery加载的页面不起作用

I'm trying to use ElementTransitions (https://github.com/dan-silver/ElementTransitions) but it won't work in the page I loaded with JQuery, only working at index page.

我正在尝试使用ElementTransitions(https://github.com/dan-silver/ElementTransitions),但它不能在我加载JQuery的页面中工作,只能在索引页面上工作。

It should rotate the div when clicked upon. I wonder if it has something to do with jquery loading and the lib functions. I tried to click the div with JQuery .click() with no success. Even including a page with the below code at the index page with php has no effect. I am loading the css and js at the head tag as advised by the tutorial page (http://dan-silver.github.io/ElementTransitions/).

它应该在单击时旋转div。我想知道它是否与jquery加载和lib函数有关。我试图用JQuery .click()单击div但没有成功。即使在包含php的索引页面中包含以下代码的页面也没有效果。我按照教程页面(http://dan-silver.github.io/ElementTransitions/)的建议在头标记处加载css和js。

<div class="et-wrapper et-rotate" et-in="rotateSlideIn" et-out="rotateSlideOut">
    <div class="et-page">
        <h2>Page 1</h2>
    </div>
    <div class="et-page">
        <h2>Page 2</h2>
    </div>
</div>

EDIT:

index.php

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="libs/elementTransitions/elementTransitions.min.css">
    <script src="libs/elementTransitions/elementTransitions.min.js"></script>
</head>
<body>  



</body>
<script src="jquery-1.12.3.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script>
  $('body').load('controle_acesso.php');

</script>
</html>

controle_acesso.php

 <div class="et-wrapper et-rotate" et-in="rotateSlideIn" et-out="rotateSlideOut">
    <div class="et-page et-page-current">
        <h2>Page 1</h2>
    </div>
    <div class="et-page">
        <h2>Page 2</h2>
    </div>
</div>

1 个解决方案

#1

It seems that it's due to your order of loading JS.

这似乎是由于您加载JS的顺序。

All your libraries including the initialization of ElementTransitions are loaded in the HTML-head, while your content, which should be transitioned, is loaded after that via jQuery.

包括ElementTransitions初始化在内的所有库都加载到HTML头中,而应该转换的内容在之后通过jQuery加载。

You may try to call PageTransitions.init(); again additionally after $('body').load('controle_acesso.php');.
Or you move the inclusion <script src="libs/elementTransitions/elementTransitions.min.js"></script> down after your DOM manipulation.

您可以尝试调用PageTransitions.init();另外在$('body')之后.load('controle_acesso.php');.或者在DOM操作之后将包含

By the way: your controle_acesso.php is not valid PHP.
If it really only contains HTML, that use a valid HTML and try loading it via $('body').load('controle_acesso.html .et-wrapper');.

顺便说一下:你的controle_acesso.php是无效的PHP。如果它真的只包含HTML,它使用有效的HTML并尝试通过$('body')加载它.load('controle_acesso.html .et-wrapper');.

#1