繼續頁面加載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動畫？

回答

相關問題