複製CSS3文字整理/飛在

Question

我試圖複製CSS文本從這段視頻中飛：

https://www.youtube.com/watch?v=QZpZ1zRcR6c&t=537s

然而，當我跑我的代碼，它導致信正在轉變，但固定。這些字母是隨機放置的，但它們不會飛到它們的內嵌塊顯示。我試圖在一個函數內動態地完成這件事，所以它可能有點混亂。我不知道我做錯了這裏...

var congratsPhrases = ["Awesome!", "Wonderful!", "Great Job!", "Fantastic!", "Terrific!", "Superb!", "Amazing!", "Brilliant!", "Well Done!", "Excellent!", "Nice Work!", "Bravo!", "Perfect!", "Genius!"]; 

function congratulateUser(){ 

    // empty body, background color black, pick a random congratulatory message 
    $("body").empty(); 
    $("body").css({"background-color":"black"}).append(`<ul class="text-animate hidden" id="congratsUL"></ul>`); 
    var congratsInd = Math.floor(Math.random()*congratsPhrases.length); 
    var randomCongratsMessage = congratsPhrases[congratsInd]; 

    // CSS transition 
    $("#congratsUL").css({"position":"absolute", "top":"50%", "left":"50%", "list-style-type":"none", "transform":"translateX(-50%) translateY(-50%)"}); 
    for (var i = 0; i < randomCongratsMessage.length; i++) { 
    $("#congratsUL").append(`<li>${randomCongratsMessage[i]}</li>`); 
    $("#congratsUL li").css({"color":"white", "margin-right":"30px", "opacity":"1", "display":"inline-block", "font-size":"3.5em", "font-family":"'Bungee Shade', 'Helvetica Neue', Helvetica, Arial", "transition":"all 2.5s ease"}); 

    $("#congratsUL li:last-child").css({"margin-right":"0"}); 
    // get random number between 1 & 300 that is either positive or negative 
    var randomNum = Math.floor(Math.random()*250) + 1; 
    randomNum *= Math.floor(Math.random()*2) === 1 ? 1 : -1; 
    // position the li elements on the page randomly 
    $(`#congratsUL.hidden li:nth-child(${i+1})`).css({"transform":`translateX(${randomNum}px) translateY(${randomNum}px)`, "opacity":"0"}); 
    } 
    setTimeout(function(){ 
    $("#congratsUL").removeClass("hidden") 
    }, 500); 
} 

Answer 1

的問題是，您要添加的CSS內聯，所以當你從ul刪除hidden類，內聯樣式的lis仍存在。您可以覆蓋在CSS中使用!important內嵌樣式：

var congratsPhrases = ["Awesome!", "Wonderful!", "Great Job!", "Fantastic!", "Terrific!", "Superb!", "Amazing!", "Brilliant!", "Well Done!", "Excellent!", "Nice Work!", "Bravo!", "Perfect!", "Genius!"]; 
 

 
function congratulateUser(){ 
 

 
    // empty body, background color black, pick a random congratulatory message 
 
    $("body").empty(); 
 
    $("body").css({"background-color":"black"}).append(`<ul class="text-animate hidden" id="congratsUL"></ul>`); 
 
    var congratsInd = Math.floor(Math.random()*congratsPhrases.length); 
 
    var randomCongratsMessage = congratsPhrases[congratsInd]; 
 

 
    // CSS transition 
 
    $("#congratsUL").css({"position":"absolute", "top":"50%", "left":"50%", "list-style-type":"none", "transform":"translateX(-50%) translateY(-50%)"}); 
 
    for (var i = 0; i < randomCongratsMessage.length; i++) { 
 
    $("#congratsUL").append(`<li>${randomCongratsMessage[i]}</li>`); 
 
    $("#congratsUL li").css({"color":"white", "margin-right":"30px", "opacity":"0", "display":"inline-block", "font-size":"3.5em", "font-family":"'Bungee Shade', 'Helvetica Neue', Helvetica, Arial", "transition":"all 2.5s ease"}); 
 

 
    $("#congratsUL li:last-child").css({"margin-right":"0"}); 
 
    // get random number between 1 & 300 that is either positive or negative 
 
    var randomNum = Math.floor(Math.random()*250) + 1; 
 
    randomNum *= Math.floor(Math.random()*2) === 1 ? 1 : -1; 
 
    // position the li elements on the page randomly 
 
    $(`#congratsUL.hidden li:nth-child(${i+1})`).css({"transform":`translateX(${randomNum}px) translateY(${randomNum}px)`}); 
 
    } 
 
    setTimeout(function(){ 
 
    $("#congratsUL").removeClass("hidden") 
 
    }, 500); 
 
} 
 

 
congratulateUser();

ul:not(.hidden) li { 
 
    transform: translateX(0px) translateY(0px) !important; 
 
    opacity:1 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者，你可以只明確了內嵌樣式上timeout，而不是刪除的類ul的：

var congratsPhrases = ["Awesome!", "Wonderful!", "Great Job!", "Fantastic!", "Terrific!", "Superb!", "Amazing!", "Brilliant!", "Well Done!", "Excellent!", "Nice Work!", "Bravo!", "Perfect!", "Genius!"]; 
 

 
function congratulateUser(){ 
 

 
    // empty body, background color black, pick a random congratulatory message 
 
    $("body").empty(); 
 
    $("body").css({"background-color":"black"}).append(`<ul class="text-animate" id="congratsUL"></ul>`); 
 
    var congratsInd = Math.floor(Math.random()*congratsPhrases.length); 
 
    var randomCongratsMessage = congratsPhrases[congratsInd]; 
 

 
    // CSS transition 
 
    $("#congratsUL").css({"position":"absolute", "top":"50%", "left":"50%", "list-style-type":"none", "transform":"translateX(-50%) translateY(-50%)"}); 
 
    for (var i = 0; i < randomCongratsMessage.length; i++) { 
 
    $("#congratsUL").append(`<li>${randomCongratsMessage[i]}</li>`); 
 

 
    $("#congratsUL li:last-child").css({"margin-right":"0"}); 
 
    // get random number between 1 & 300 that is either positive or negative 
 
    var randomNum = Math.floor(Math.random()*250) + 1; 
 
    randomNum *= Math.floor(Math.random()*2) === 1 ? 1 : -1; 
 
    // position the li elements on the page randomly 
 
    $(`#congratsUL li:nth-child(${i+1})`).css({"transform":`translateX(${randomNum}px) translateY(${randomNum}px)`, "opacity":"0"}); 
 
    } 
 
    setTimeout(function(){ 
 
    $("#congratsUL li").attr("style",""); 
 
    }, 500); 
 
} 
 

 
congratulateUser();

#congratsUL li { 
 
    color:white; 
 
    margin-right:30px; 
 
    opacity:1; 
 
    display:inline-block; 
 
    font-size:3.5em; 
 
    font-family:'Bungee Shade', 'Helvetica Neue', 'Helvetica, Arial'; 
 
    transition:all 2.5s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>