继续页面加载CSS动画？

我希望我的header.php中的元素的CSS动画可以在不同的页面上顺利地继续。继续页面加载CSS动画？

因此，如果我有一个200秒的循环动画和80秒，我点击了关于我们页面的动画在页面加载时仍然是80秒？

这是可能的，如果是这样，怎么样？谢谢。

来源

2014-10-28 Trent Riddington

如果您可以在页面退出时获取当前动画的状态并将其发送到下一页，那么下一页可以简单地在该点开始动画。但祝好运可靠地检测页面何时退出。 – 2014-10-28 14:23:55

你最好离开标题并使用AJAX加载新的页面内容/调整URL。 – naththedeveloper 2014-10-28 14:25:14

您不提供足够的信息让我们知道如何帮助您。为了在不触及标题动画的情况下对页面进行修改，我的建议是正确使用Javascript来更改要修改的部分，让页面的其他部分不受影响。 – 2014-10-28 14:25:42

你可以做到这一点，如果它是某种关键帧动画，如：

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; 
}

$(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')"

您可以使用负动画延迟从某个点开始动画，但无论如何，这种方法并不完美，但值得一试。

PS不过还好在这种情况下:)

来源

2014-10-28 15:03:44

快速粗略的想法使用AJAX的页面重载

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的时间变量，我道歉，如果错误在这里，字面上只是把这个从我的屁股，但概念是在那里，没有阿贾克斯nee DED。

来源

2014-10-28 15:11:37 Typhomism

继续页面加载CSS动画？

回答

相关问题