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

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为position：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的div，不像我在之前的解决方案中使用它，因为现在你不再需要它了。