淡入與改造規模，jQuery和CSS3

我想其中一個盒子淡入，並創建一個效果「生長」了一點，因爲它的消失。淡入與改造規模，jQuery和CSS3

盒子開始爲display:none和transform: scale(0.8,0.8)所以它的比原來小0.2。

當它消失，我希望它也擴展爲scale(1,1)

我處理使用jQuery淡入的5000延遲一段時間後，和我再追加一個新的風格，使用jQuery箱。

我有transition: transform 1s;來處理從0.8到1的平穩過渡，但它似乎不起作用。

$(document).ready(function() { 
    console.log("ready!"); 
    $(".modal-newsletter-wrap").delay(5000).fadeIn("slow", function() { 
    }); 
    $(".modal-newsletter").delay(6000).css("transform", "scale(1,1)"); 
});

這裏是CSS

.modal-newsletter{transition: transform 1s;transform:scale(0.8,0.8);position:fixed;}

的jsfiddle包括這表明它在衰落（稍等幾秒鐘），但它在全尺寸1在變淡，不0.8。

https://jsfiddle.net/bpbd1mjp/1/

來源

2015-03-25 Francesca

我想你需要'setTimeout'。 – 2015-03-25 11:01:17

jQuery是沒有必要的，使用而不是簡單的CSS3動畫：http://codepen.io/anon/pen/xbMWXL

@-webkit-keyframes overlay { 
    0% { -webkit-transform: scale(.8); opacity: 0; } 
    100% { -webkit-transform: scale(1.1); opacity: 1; z-index: 1 } 
} 
@-moz-keyframes overlay { 
    0% { -moz-transform: scale(.8); opacity: 0; } 
    100% { -moz-transform: scale(1.1); opacity: 1; z-index: 1 } 
} 
@keyframes overlay { 
    0% { transform: scale(.8); opacity: 0; } 
    100% { transform: scale(1.1); opacity: 1; z-index: 1 } 
} 

.modal-newsletter-wrap { 
    width: 100px; 
    height: 100px; 
    background: #ccc; 

    /* start with a negative z-index so the user may interact with the page 
    the actual z-index is set on the last animation keyframe */ 

    position: fixed; 
    z-index: -1; 

    opacity: 0; 

    -webkit-transform: scale(.8); 
    -webkit-animation: overlay 1s linear 5s 1 forwards; 

    -moz-transform: scale(.8); 
    -moz-animation: overlay 1s linear 5s 1 forwards; 

    transform: scale(.8); 
    animation: overlay 1s linear 5s 1 forwards; 
}

效果有5秒的延遲後開始，並且效果的持續時間被設定爲1秒。隨着它消失，元素縮放到1.1。動畫保留了最後一幀（animation-fill-mode屬性設置爲forwards）

來源

2015-03-25 11:00:19 fcalderan

我認爲這個問題是，當頁面加載時，模式彈出窗口必須是「display：none」。您的解決方案會創建動畫確定，但會阻止任何其他內容。這是爲了疊加在頁面上，並在一段時間後淡入以提示用戶。該解決方案將阻止用戶在屏幕上執行任何操作。 – Francesca 2015-03-25 11:08:51

謝謝，我會給你一個去。 – Francesca 2015-03-25 11:10:42

在你打開對話框動畫之前，快速入侵將設置顯示爲阻止/ etc，其中不透明度爲0？ – jbutler483 2015-03-25 11:12:07

我不知道如果我得到這個權利，但你可以嘗試這樣的JS：

$(document).ready(function() { 
    console.log("ready!"); 
    $(".modal-newsletter-wrap").delay(5000).fadeIn("slow" 
    ,function(){ 
     $(".modal-newsletter").css("transform", "scale(1,1)"); 
    $(".modal-newsletter").css("-webkit-transform", "scale(1,1)"); 
    $(".modal-newsletter").css("-moz-transform", "scale(1,1)"); 
    }); 

});

，並改變這個CSS：

.modal-newsletter{ 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    transition: all 1s; 
    -webkit-transform: scale(0.8,0.8); 
    -moz-transform: scale(0.8,0.8); 
    transform: scale(0.8,0.8); 
    background-repeat:repeat-x; 
    background-image:url(http://localhost/Eat-Sleep-Knit/wp-content/themes/KnittersParadise/img/stripe.png); 
    position:fixed; 
}

這是鏈接

https://jsfiddle.net/bpbd1mjp/4/

來源

2015-03-25 11:08:38

對不起，我編輯它 – 2015-03-25 11:11:26

這工作相當好，但不幸的是它不光滑。縮放轉換需要在動畫開始之前開始，以便它們同時工作。 – Francesca 2015-03-25 11:12:27

淡入與改造規模，jQuery和CSS3

回答

相關問題