jquery - 为背景和内容设置动画

Question

我正在尝试为启动画面制作动画，我可以为 Logo 制作动画，但是当我尝试为背景制作动画时，整体动画效果不起作用。
我在这里试过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

据我从您的帖子中了解到，您正在尝试使用 .page__intro-wrapper 类对 div 进行任何处理。问题出在您的 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;
 }

这是 fiddle :https://jsfiddle.net/johannesMt/yu2afj7b/3/