我希望我的header.php中的元素的CSS动画能够在不同的页面上顺利继续。
所以如果我有一个200秒的循环动画和80秒,我点击了关于我们的页面,动画在页面加载时仍然是80秒?
这是否可能,如果是这样,怎么样?感谢。
答案 0 :(得分:1)
如果它是某种类型的关键帧动画,你可以这样做:
<强> CSS 强>
@keyframes colorchange {
0% {background: red;}
50% {background: green;}
100% {background: yellow;}
}
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: colorchange 5s linear infinite;
animation: colorchange 5s linear infinite;
-moz-animation: colorchange 5s linear infinite;
}
<强> JS 强>
$(document).ready(function(){
var animationTime=0;
var intId = setInterval(function(){
animationTime++;
},1000);
var postTime = function(link){
$.ajax({
type: 'POST',
url: link,
data: {'variable': animationTime},
});
}
$('a').click(function(){
window.onbeforeunload = postTime($(this).attr('href'));
})
})
<强> PHP 强>
$myval = $_POST['variable'];
echo "$('div').css('animation-delay', '-".$myval."s')"
您可以使用负动画延迟从某个点开始动画,但无论如何,这种方法并不完美,但值得一试。
P.S 但在这种情况下最好使用AJAX进行页面重新加载:)
答案 1 :(得分:1)
快速粗略思考
time = 200000;
var distance = 300;
window.currentTime = 0;
$('#element').animate({ left: distance },
{
duration: time,
step: function(now, fx) {
window.currentTime = Math.round((now*time)/distance);
}
});
$('a').on("click", function(e){
e.preventDefault();
window.location.href = "http://yoururl.com/?startingPoint=" + (time - window.currentTime);
});
然后在每个文件中执行类似
的操作if($_GET['startingPoint']){
echo 'time = '.$_GET['startingPoint'];
}
else{
echo 'time = 200000';
}
代替javascript时间变量,我很抱歉,如果这里有错误,只是把它从我的屁股中拉出来,但概念就在那里,并且不需要ajax。