Переопределение класса CSS для анимации не работает - PullRequest
Новая
       27

Переопределение класса CSS для анимации не работает

0 голосов
/ 14 сентября 2018

У меня есть следующий HTML / CSS / JS.Я хочу отключить анимацию ключевых кадров для дочерних элементов list-div li на мобильных устройствах или шириной экрана ниже 780 пикселей.Поскольку я не хочу возиться с решением JavaScript, читая пользовательский агент, я подумал о переопределении добавляемого класса анимации.
Однако это не работает.Итак, почему я хочу переопределить класс и отключить анимацию, потому что я хочу выровнять li по углу списка div, например: li:nth-child(1){top: 0; left:0;} по absolute позиционированию.
Вот фрагмент кода,Я также вставил его в тестирование ширины экрана для кода: https://codepen.io/anon/pen/JaZgrX

     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;
  }
}

@media max-width:768px{
  
  
  .list-div li.animate{
  visibility: visible;
}
  .list-div {
  display: flex;
  justify-content: center;
  align-items: center;
}
}
<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>

1 Ответ

0 голосов
/ 14 сентября 2018

Я думаю, это то, что вам нужно. Переключитесь на полный просмотр страницы, чтобы увидеть анимацию. 

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;
  }
}

@media (max-width:768px) {
  .list-div ul {
    margin-top: 0;
  }
  
  .list-div li.animate {
    visibility: visible;
    animation: none;
  }
  .list-div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
<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>
...