对齐类似于静态的动画列表

Posted 2023-02-25

【中文标题】对齐类似于静态的动画列表

【英文标题】：Align animated list similiar to static

【发布时间】：2018-09-12 07:05:01

【问题描述】：

我想对齐动画列表，使顶部和底部的边距相等，我想在其父 div 中居中“完成”动画列表。当前的 CSS 显示在代码 sn-p 中。如何在不丢失动画的情况下将列表置于其父 div 中？ （我设法在没有动画的情况下将其居中）。

      current = 1;
      $(".list-div ul li").each(function()
        $(this).addClass("animate").css("animation-delay", current + 's');
        current++;
      );

body 
  margin:0;

.container 
  display:flex;
  flex-wrap:wrap;    
  flex-direction:row;    
  height:100vh;
  background-color: beige;

.container > div 
  min-height: 100vh;
  border:1px solid black;
  box-sizing:border-box;
  background-color: inherit;

.half-width 
  width:50%;

.half-width > .half-width-content
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;

.list-div 
  display: flex;
  justify-content: center;
  align-items: center;


.list-div ul 
  padding: 0;
  margin-top: 15%;
  width: 75%;


.list-div li 
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: hidden;


.list-div li.animate
  visibility: visible;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;


@-webkit-keyframes fadeIn 
  0% 
    opacity: 0;
    top: 220px;
  
  25%
    opacity: 0.3;
  
  
  75% 
    opacity: 0.5;
    top: 0px;
  
  100% 
    opacity: 1;
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="half-width">
    <div class="half-width-content" id="list-cont">
      <div class="list-div">
        <ul>
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

对于 list-div？

【参考方案1】：

设置.list-divheight:100% 并从.list-div ul 中删除margin-top: 15px

【讨论】：

这不起作用，因为只有第一个列表项是“居中”的，其他的都在下面

该死的甚至没有注意到我有这个：D

这就是为什么它也不适用于我自己的解决方案，+1:)

【参考方案2】：

我记录了源代码中的 CSS 更改。它主要是正确使用盒子的高度定义。

current = 1;
$(".list-div ul li").each(function() 
  $(this).addClass("animate").css("animation-delay", current + 's');
  current++;
);

* 
  box-sizing: border-box;


body 
  margin: 0;


.container 
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
  background-color: beige;


.container>div 
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
  background-color: inherit;


.half-width 
  width: 50%;


.half-width>.half-width-content 
  /* position: relative; */
  margin: 0;
  /* height: 100%; */
  width: 100%;
  background-color: lightblue;
  padding: 1rem 0; /* Value for top and bottom */


.list-div 
  display: flex;
  justify-content: center;
  align-items: center;


.list-div ul 
  padding: 0;
  /* margin-top: 15%; */
  margin: 0;
  width: 75%;


.list-div li:not(:last-child) 
  margin-bottom: 5px;


.list-div li 
  position: relative;
  display: block;
  border: 1px solid red;
  /* margin-bottom: 5px; */
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: hidden;


.list-div li.animate 
  visibility: visible;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;


@-webkit-keyframes fadeIn 
  0% 
    opacity: 0;
    top: 220px;
  
  25% 
    opacity: 0.3;
  
  75% 
    opacity: 0.5;
    top: 0px;
  
  100% 
    opacity: 1;
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="half-width">
    <div class="half-width-content" id="list-cont">
      <div class="list-div">
        <ul>
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
    </div>
  </div>
</div>