我正在尝试使用 ElementTransitions ( https://github.com/dan-silver/ElementTransitions )，但它在我用 JQuery 加载的页面中不起作用，只能在索引页面上起作用。
它应该在点击时旋转 div。我想知道它是否与 jquery 加载和 lib 函数有关。我试图用 JQuery .click() 单击 div 但没有成功。即使在带有 php 的索引页中包含具有以下代码的页面也没有效果。 我正在按照教程页面 (http://dan-silver.github.io/ElementTransitions/) 的建议在 head 标记处加载 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>
编辑:
索引.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>
最佳答案
看来是你加载JS的顺序问题
您的所有库(包括 ElementTransitions 的初始化)都加载到 HTML 头中，而您的内容(应该被转换)之后通过 jQuery 加载。
您可以尝试调用PageTransitions.init();在 $('body').load('controle_acesso.php'); 之后再次添加.
或者你移动包含 <script src="libs/elementTransitions/elementTransitions.min.js"></script>在你的 DOM 操作之后下降。
顺便说一句:您的 controle_acesso.php 不是有效的 PHP。
如果它真的只包含 HTML，请使用有效的 HTML 并尝试通过 $('body').load('controle_acesso.html .et-wrapper'); 加载它.
关于javascript - ElementTransitions 不适用于 jquery 加载的页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37379736/