Question

我尝试使用ElementTransitions（https://github.com/dan-silver/ElementTransitions），但它在我加载JQuery的页面中无法工作，只能在索引页面上工作。

点击时应旋转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>

编辑：

的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>

Answer 1

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

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

您可以在PageTransitions.init();之后再次致电$('body').load('controle_acesso.php'); 或者在DOM操作之后将包含<script src="libs/elementTransitions/elementTransitions.min.js"></script>向下移动。

顺便说一句：你的 controle_acesso.php 是无效的PHP。
如果它实际上只包含HTML，则使用有效的HTML并尝试通过$('body').load('controle_acesso.html .et-wrapper');加载它。

ElementTransitions不适用于加载jquery的页面

1 个答案: