Question

是否可以在一定范围内对诸如animation-test之类的DOM元素进行垂直动画处理，而其父元素相对于文档主体保持垂直居中？ align-self-center中包含Bootstrap类animation-test-parent似乎阻止了这种情况的发生。

有关更多信息，我正在寻求实现与移动Chrome浏览器类似的动画，该动画附在下面，同时保持内容的垂直对齐： https://imgur.com/a/Dsmhkje

如果以上操作均不可行，您如何建议实现此UI？

非常感谢！

html,
body {
  height: 100%;
}

#animation-test {
  line-height: 1.5rem;
  animation: fadein 2s;
  -moz-animation: fadein 2s;
  -webkit-animation: fadein 2s;
  -o-animation: fadein 2s;
}

@-webkit-keyframes fadein {
  0% {
    line-height: 280px;
  }
  /*  100% {line-height: 100px;}*/
}

@-moz-keyframes fadein {
  0% {
    line-height: 280px;
  }
  /*  100% {line-height: 100px;}*/
}

@-o-keyframes fadein {
  0% {
    line-height: 280px;
  }
  /*  100% {line-height: 100px;}*/
}

@keyframes fadein {
  0% {
    line-height: 280px;
  }
  /*  100% {line-height: 100px;}*/
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Material Design Bootstrap -->
<link href="MDB-Free/css/mdb.min.css" rel="stylesheet">

<body>
  <div class="container px-0 h-100">
    <div class="row no-gutters h-100">
      <div class="col align-self-center">
        <div id="animation-test-parent" class="row no-gutters">
          <div id="animation-test" class="col">
            animation debug
          </div>
        </div>
      </div>
    </div>
  </div>
</body>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row no-gutters h-100">
    <div class="col align-self-center">
        <div id="animation-test-parent" class="row no-gutters">
            <div id="animation-test" class="col azk-title">
                animation debug
            </div>                    
        </div>
    </div>
</div>

#animation-test {
 line-height: 1.5rem;
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s; 
}

@-webkit-keyframes fadein {
    0% {line-height: 280px;}
}

@-moz-keyframes fadein {
    0% {line-height: 280px;}
}
@-o-keyframes fadein {
    0% {line-height: 280px;}
}
@keyframes fadein {
    0% {line-height: 280px;}
}

使用“对齐自我中心” Bootstrap父元素对DOM元素进行垂直动画处理

0 个答案: