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

据我所知，你在帖子中尝试使用班级.page__intro-wrapper任意div。问题在于你的scss，yuo正在将.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/

动画背景和内容

1 个答案: