如何动画单个列表项目

Question

我正在尝试在维护列表格式的同时为每个单独的li列表元素进行动画动画。

这是CSS

$(".BeverlyWarbrickcontent").css("visibility", "hidden");
$("#BeverlyWarbrick").mouseover(function() {
  $(".BeverlyWarbrickcontent").css('visibility', 'visible');
});
$("#BeverlyWarbrick").mouseover(function() {
  $(".BeverlyWarbrickcontent").css('visibility', 'visible');
});
$("#BeverlyWarbrick").mouseout(function() {
  $(".BeverlyWarbrickcontent").css('visibility', 'hidden');
});
$(".MargaretNooskicontent").css("visibility", "hidden");
$("#MargaretNooski").mouseover(function() {
  $(".MargaretNooskicontent").css('visibility', 'visible');
});
$("#MargaretNooski").mouseover(function() {
  $(".MargaretNooskicontent").css('visibility', 'visible');
});
$("#MargaretNooski").mouseout(function() {
  $(".MargaretNooskicontent").css('visibility', 'hidden');
});
$(".SavannahHallcontent").css("visibility", "hidden");
$("#SavannahHall").mouseover(function() {
  $(".SavannahHallcontent").css('visibility', 'visible');
});
$("#SavannahHall").mouseover(function() {
  $(".SavannahHallcontent").css('visibility', 'visible');
});
$("#SavannahHall").mouseout(function() {
  $(".SavannahHallcontent").css('visibility', 'hidden');
});
$(".TraciCliftoncontent").css("visibility", "hidden");
$("#TraciClifton").mouseover(function() {
  $(".TraciCliftoncontent").css('visibility', 'visible');
});
$("#TraciClifton").mouseover(function() {
  $(".TraciCliftoncontent").css('visibility', 'visible');
});
$("#TraciClifton").mouseout(function() {
  $(".TraciCliftoncontent").css('visibility', 'hidden');
});

body {
  background-color: #000;
}
ul {
  margin: 0;
  padding: 0;
}
.women {
  margin-left: 10px;
}
.women ul li {
  font-family: serif;
  font-size: 3em;
  color: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
}
#BeverlyWarbrick {
  position: relative;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: float-right;
  -moz-animation-name: float-right;
  -o-animation-name: float-right;
  animation-name: float-right;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  left: -500px;
}
@-webkit-keyframes float-right {
  0% {
    left: -500px;
    opacity: 0;
  }
  25% {}
  80% {
    left: -20px;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}
@-moz-keyframes float-right {
  0% {
    left: -500px;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    left: -20px;
  }
  100% {
    left: 0px;
  }
}
@-o-keyframes float-right {
  0% {
    left: -500px;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    left: -20px;
  }
  100% {
    left: 0px;
  }
}
@-keyframes float-right {
  0% {
    left: -500px;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    left: -20px;
  }
  100% {
    left: 0px;
  }
}
}
.BeverlyWarbrickcontent h1 {
  color: #fff;
  font-family: serif;
  font-size: 3em;
  font-weight: 400;
  margin: 0;
}
.BeverlyWarbrickcontent p {
  color: #fff;
  font-family: serif;
  font-size: 3em;
  font-weight: 400;
}
#BeverlyWarbrick:hover .BeverlyWarbrickcontent {}
.MargaretNooskicontent {
  position: absolute;
  top: 0;
}
.MargaretNooskicontent h1 {
  color: #fff;
  font-family: serif;
  font-size: 3em;
  font-weight: 400;
  margin: 0;
}
.MargaretNooskicontent p {
  color: #fff;
  font-family: serif;
  font-size: 3em;
  font-weight: 400;
}
.SavannahHallcontent {
  position: absolute;
  top: 0;
}
.SavannahHallcontent h1 {
  color: #fff;
  font-family: serif;
  font-size: 3em;
  font-weight: 400;
  margin: 0;
}
.SavannahHallcontent p {
  color: #fff;
  font-family: serif;
  font-size: 3em;
  font-weight: 400;
}
.TraciCliftoncontent {
  position: fixed;
  top: 0;
}
.TraciCliftoncontent h1 {
  color: #fff;
  font-family: serif;
  font-size: 3em;
  font-weight: 400;
  margin: 0;
}
.TraciCliftoncontent p {
  color: #fff;
  font-family: serif;
  font-size: 3em;
  font-weight: 400;
}
.wrapperleft {
  width: 50vw;
  display: block;
}
.wrapperright {
  width: 50vw;
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapperleft">
  <div class="women">
    <ul>
      <div id="BeverlyWarbrick">
        <li>Beverly Warbrick</li>
      </div>
      <div id="MargaretNooski">
        <li>Margaret Nooski</li>
      </div>
      <div id="SavannahHall">
        <li>Savannah Hall</li>
      </div>
      <li>Destiny Rae Tom</li>
      <li>Loren Donn Leslie</li>
      <li>Therese Umphrey</li>
      <li>Tracey Nadine Jack (Wolfe)</li>
      <li>Anita Florence Thorne</li>
      <li>Cynthia Frances Maas</li>
      <li>Doreen Jack</li>
      <li>Aielah Saric Auger</li>
      <li>Christine Kinequon</li>
      <li>Stephanie Joy Donnelly</li>
      <li>Roberta (Robin) Marie Sims</li>
      <li>Sheila Faye Kinequon</li>
      <li>Roxanne Thiara</li>
      <li>Lana Derrick</li>
      <li>Ramona Wilson</li>
      <li>Alishia 'Leah' Germaine</li>
      <li>Monica Ignas</li>
      <li>Roswitha Fuchsbichler</li>
      <li>Shirley Williams</li>
      <li>Coreen Thomas</li>
      <li>Jessica Patrick (Balczer)</li>
      <li>Maria Practicante Rego</li>
      <li>Brittany Giese</li>
      <li>Amanda Jean Simpson</li>
      <li>Tara Lee Ann Williams</li>
      <li>Kimberly Dumais</li>
      <li>Hazel White</li>
      <li>Nina Marie Joseph</li>
      <li>Nicole Hoar</li>
      <li>Immaculate ''Mackie Mary Basil</li>
      <li>Natasha Lynn Montgomery</li>
      <li>Emmalee Rose Mclean</li>
      <li>Kayla Rose McKay</li>
      <li>Monica McKay</li>
      <li>Maureen Sullivan</li>
      <li>Mary Madeline George</li>
      <li>Mary Jane Hill</li>
      <li>Madison "Maddy" Geraldine Scott</li>
      <li>Linda Geraldine Le Franc</li>
      <li>Linda Fredin</li>
      <li>Helen Claire Frost</li>
      <li>Tamara Lynn Chipman</li>
      <li>Marnie Blanchard</li>
      <li>Cynthia Martin</li>
      <li>Jean Mary Kovacs</li>
      <li>April Rose Johnson</li>
      <li>Helena Jack</li>
      <li>Unnamed</li>
      <li>Donna Charlie</li>
      <li>Jill Stacey Stuchenko</li>
      <li>Jean Virginia "Ginny" Sampare</li>
      <li>Frances Brown</li>
      <li>Melanie Dawn Brown</li>
      <li>Leah Marie Faulkner</li>
      <div id="TraciClifton">
        <li>Traci Clifton</li>
      </div>
      <li>Wendy Ann Twiss Ratte</li>
      <li>Helga Rochon</li>
      <li>Sherri Rochon</li>
      <li>Pauline Rochon</li>
      <li>Delphine Anne Camelia Nikal</li>
      <li>Cicilia Anne Nikal</li>
      <li>Chantelle Catherine Simpson</li>
      <li>Candace Marie Kalmokoff</li>
      <li>Chassidy Charlie</li>
      <li>Bonnie Marie Joseph</li>
      <li>Ada Elaine Brown</li>
      <li>Barbara Joseph</li>
      <li>Alberta Gail Williams</li>
    </ul>
  </div>
</div>
<div class="wrapperright">
  <!--<img src="https://tce-live2.s3.amazonaws.com/media/media/2fd08a5f-bf5f-4b4c-988d-8455a418d99b.jpg"/>-->
  <div class="BeverlyWarbrickcontent">
    <h1>Beverly Warbrick</h1>
    <p>Went missing from the 2100 block of Oak Street in Prince George in June 2007.</p>
  </div>
  <div class="MargaretNooskicontent">
    <h1>Margaret Nooski</h1>
    <p>Age: 89<br>Last known location: Fraser Lake<br>Was last seen hitchhiking near Fraser Lake when she went missing on the afternoon of Saturday 2 October 2004. She was last seen near the Nautley Road turn-off on Highway 16. A helicopter searched for
      her on 5 October 2004. She was suffering from dementia and had difficulty walking. RCMP stated that they think she may have been trying to get to Prince George, or she may have headed into the bush in search of her traditional trapping territory.</p>
  </div>
  <div class="SavannahHallcontent">
    <h1>Savannah Hall</h1>
    <p>Age: 89<br>Last known location: Fraser Lake<br>Was found gurgling and gasping by foster parents Patricia and Thomas Keene in their Prince George home. A leather harness, the sort normally used to teach toddlers to walk, would be fastened to her chest
      and shoulders. Straps would then be tied to her crib, to keep her in place. A coroner's inquest was held which determined the cause of death was homicide.[72] No charges were ever laid. However the Keenes were taken off the Ministry of Children
      and Family Development's "preferred homes" list for foster care. Thomas Keene subsequently attempted to sue the BC government for "loss of profits" due to the loss of income his family received from foster care after being removed from preferred
      homes list (BC Civil Court file 14097/03)</p>
  </div>
  <div class="TraciCliftoncontent">
    <h1>Traci Clifton</h1>
    <p>Age: Unknown<br>Last known location: Prince Rupert<br> Exact date that Traci went missing is not yet public knowledge. It was reported at an inquiry for murdered and missing indigenous women as some time in the 1970s. She had an argument with her
      mom, left home and started walking highway 16 and was never seen again.</p>
  </div>
</div>

问题在于它要求DIV是位置：将项目从列表位置排除的绝对值。

有没有一种方法可以在维护其列表位置的同时对每个单独的列表项目进行动画？

您可以在此处查看示例https://codepen.io/anon/pen/mxrzmx

Answer 1

而不是使用position: absolute;，您需要使用position: relative;

#BeverlyWarbrick {
   position: relative;
}

例如：

body {
  background-color: #000;
}
ul {
  margin: 0;
  padding: 0;
}
.women {
  margin-left: 10px;
}
.women ul li {
  font-family: serif;
  font-size: 3em;
  color: #fff;
  list-style: none;
}
.women div {
  position: relative;
  animation: 2s float-right ease-out forwards;
  left: -500px;
}
.women div:nth-of-type(2) {
  animation-delay: 1s;
}
@keyframes float-right {
  0% {
    left: -500px;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    left: -20px;
  }
  100% {
    left: 0px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="women">
  <ul>
    <div id="BeverlyWarbrick">
      <li>Beverly Warbrick</li>
    </div>
    <div id="MargaretNooski">
      <li>Margaret Nooski</li>
    </div>
  </ul>
</div>

请注意，我已经从下面的片段中删除了一些代码，并且仅出于演示目的而保持其最少。

此外，您编写CSS的方式是不可扩展的。您正在为每个元素重复相同的CSS。而不是考虑使用标签选择器，也建议将SASS用于此类内容，以便您可以轻松地循环延迟每个项目以使每个项目都可以使用jQuery将class添加到每个项目中，以延迟然后将它们一个接一个地动画。

---

您的评论后，我还添加了一个jQuery解决方案，以延迟这些项目。例如：

let c = 0;
$(".women").find('div').each(function() {
  let elm = $(this);
  elm.css({
    'animation-delay': `${c}s`
  });
  c++;
});

body {
  background-color: #000;
}
ul {
  margin: 0;
  padding: 0;
}
.women {
  margin-left: 10px;
}
.women ul li {
  font-family: serif;
  font-size: 3em;
  color: #fff;
  list-style: none;
}
.women div {
  position: relative;
  animation: 2s float-right ease-out forwards;
  left: -500px;
}
@keyframes float-right {
  0% {
    left: -500px;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    left: -20px;
  }
  100% {
    left: 0px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="women">
  <ul>
    <div id="BeverlyWarbrick">
      <li>Beverly Warbrick</li>
    </div>
    <div id="MargaretNooski">
      <li>Margaret Nooski</li>
    </div>
  </ul>
</div>

在这里，正在循环浏览所有div并在上一个div上添加1s的延迟，因此这些项目将一个接一个地动画。请注意，我从CSS中删除了第二个div的animation-delay，与以前的解决方案中有不同，因为现在您不再需要它了。