CSS-переходы: как «прошить» в классе и выйти из него - PullRequest
Новая
       11

CSS-переходы: как «прошить» в классе и выйти из него

0 голосов
/ 29 июня 2018

Я пытаюсь мгновенно изменить цвет элемента при добавлении класса, а затем постепенно исчезать при его удалении. Я добился этого с помощью CSS-переходов, например: 

.base {
  background-color: #000000;
  transition: 1.5s background-color;
}

.base.extra {
  transition: 0s background-color;
  background-color: #00ff00;
}

Это работает, НО только если я добавлю «дополнительный» класс, а затем удалю его как отдельное действие ... 

$('#add').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').addClass('extra');
  }
)

$('#remove').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').removeClass('extra');
  }
)

$('#flash').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').addClass('extra');
    $('.base').removeClass('extra');
  }
)
.base {
  width:300px;
  height: 60px;
  background-color: #000000;
  transition: 1.5s background-color;
}
.base.extra {
  transition: 0s background-color;
  background-color: #00ff00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='base'></div>
<a id=add>Add 'extra' class</a><br/>
<a id=remove>Remove 'extra' class</a><br/>
<a id=flash>Add then remove 'extra' class</a><br/>

Если вы нажмете «Добавить ...», блок станет зеленым, проверьте.

Если вы нажмете «удалить ...», блок станет черным, отметьте.

Если вы нажмете «Добавить, затем удалить ...», ничего не изменится!

Я предполагаю, что он не меняет цвет в первую очередь, поэтому он исчезает с черного на черный.

Как сделать так, чтобы третья ссылка изменила ее на зеленую, а затем сразу начала исчезать с переходами CSS?

Примечание: Я намеренно не использую анимации jQuery для этого, так как запуск нескольких десятков из них одновременно представлял проблему с производительностью.

Ответы [ 2 ]

0 голосов
/ 29 июня 2018

1-й, у вас есть два события для #remove. Другой должен быть #flash. Во-вторых, это работает, но это слишком быстро. Установка времени ожидания (с использованием JavaScript setTimeout()) на 200 миллисекунд (= 0,2 секунды) делает эффект видимым. 

$('#add').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').addClass('extra');
  }
)

$('#remove').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').removeClass('extra');
  }
)

$('#flash').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').addClass('extra');
    setTimeout(function() {
      $('.base').removeClass('extra');
    }, 200);
  }
)
.base {
  width: 300px;
  height: 60px;
  background-color: #000000;
  transition: 1.5s background-color;
}

.base.extra {
  transition: 0s background-color;
  background-color: #00ff00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='base'></div>
<a id='add'>Add 'extra' class</a><br/>
<a id='remove'>Remove 'extra' class</a><br/>
<a id='flash'>Add then remove 'extra' class</a><br/>
0 голосов
/ 29 июня 2018

Вы можете сделать это по-другому. Вот идея с псевдоэлементом. 

.base {
  width:300px;
  height: 60px;
  background-color: #000000;
  position:relative;
}
.base:before {
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 z-index:-1;
 background-color: #00ff00;
}
.base:hover::before {
  z-index:1;
  opacity:0;
  transition: 1.5s opacity;
}
<div class='base'></div>

Тот же эффект, добавляя / удаляя класс. Вы можете положиться на событие transitionend для удаления класса: 

$('.base').on(
  'click',
  function(e) {
    e.preventDefault();
    $(this).addClass('extra').on('transitionend', function () {
      $(this).removeClass('extra');
    });
  }
)
.base {
  width:300px;
  height: 60px;
  background-color: #000000;
  position:relative;
}
.base:before {
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 z-index:-1;
 background-color: #00ff00;
}
.base.extra::before {
  z-index:1;
  opacity:0;
  transition: 1.5s opacity;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='base'></div>
...