如何为单个列表项设置动画？

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处于位置：absolute（绝对），这会使项目脱离列表位置。

有没有一种方法可以使每个单独的列表项设置动画，同时保持它们的列表位置？

您可以在此处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，并在前一个1s上添加了div延迟，因此这些项目将一个接一个地进行动画处理。请注意，我已经从CSS中删除了第二个animation-delay的{​​{1}}，与之前解决方案中的删除不同，因为现在您不再需要它了。