Как анимировать отдельные элементы списка? - PullRequest
Новая
       9

Как анимировать отдельные элементы списка?

0 голосов
/ 14 марта 2019

Я пытаюсь анимировать каждый отдельный элемент списка 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

1 Ответ

0 голосов
/ 14 марта 2019

Вместо использования 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, так что эти элементы будут анимироватьсяодин за другим.Обратите внимание, что я удалил animation-delay для 2-го div из CSS, в отличие от того, что у меня было в предыдущем решении, потому что теперь вам это больше не нужно.

...