動畫背景和內容

Question

我想在這裏動畫閃屏，我可以動畫的標誌，但是當我嘗試動畫背景整體動畫效果不工作。
我想在這裏https://jsfiddle.net/sureshpattu/yu2afj7b/：
這裏是我的SCSS：

.container { 
    display: table; 
    width: 100%; 
    height: 100vh; 
    background: #ddd; 
    margin: 20px; 
} 

.page { 
    //Intro Screen 
    &__intro { 
    display: table-cell; 
    vertical-align: middle; 
    transition: all 0.2s ease-in-out; 
    img { 
     width: 150px; 
     transition: all 0.2s ease-in-out; 
    } 
    &-wrapper { 
     position: fixed; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     z-index: 10; 
     display: table; 
     width: 100%; 
     height: 100vh; 
     background: #fff; 
     text-align: center; 
    } 
    &--hidden { 
     img { 
     width: 0; 
     transition: all 0.2s ease-in-out; 
     } 
    } 
    } 
} 

下面是HTML：

<div class="container"> 
    <div class="page__intro-wrapper"> 
    <div class="page__intro"> 
     <img src="http://szmob.rbahn.com/img/sz-logo.svg" /> 
    </div> 
    </div> 
</div> 

Answer 1

據我從您的文章瞭解你正在嘗試anymate DIV帶班.page__intro-wrapper。這個問題是在你的SCSS，宥正在增加.page__intro--hidden類屬於該類別所需的DIV中，但不是圖像。 換句話說，改變這種：

&--hidden { 
    img { 
    width: 0; 
    transition: all 0.2s ease-in-out; 
    } 
} 

這樣：

&--hidden { 
    img { 
    width: 0 !important; 
    transition: all 0.2s ease-in-out; 
    } 
    width: 0 !important; 
    transition: all 0.2s ease-in-out; 
} 

這裏是小提琴：https://jsfiddle.net/johannesMt/yu2afj7b/3/