2

Есть два элемента, при клике по первому должен плавно измениться градиент у фона второго. Вроде бы все нормально, но transition не срабатывает именно на фон, а к примеру, к прозрачности применяется.

$('.one').click(function() {
  $('.two').toggleClass('active');
})
.two {
  display: block;
  position: relative;
  width: 200px;
  height: 200px;
  background: radial-gradient(#8BC34A 0%, rgba(21, 21, 21, 0) 70%);
  transition: background 1s;
}
.two.active {
    background: radial-gradient(#FF5722 0%, rgba(21, 21, 21, 0) 70%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" class="one" value="Жми">
<div class="two"></div>

1
  • Градиенты относятся к background-image который не анимируемый. Тут есть несколько путей обхода.
    – Arnial
    5 июл 2016 в 10:51

1 ответ 1

3

$('.one').click(function() {
  $('.two').toggleClass('active');
})
.two {
  display: block;
  position: relative;
  width: 200px;
  height: 200px;
  background: radial-gradient(#8BC34A 0%, rgba(21, 21, 21, 0) 70%);
}
.two:before {
    display:block;
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background: radial-gradient(#FF5722 0%, #FFF 70%);
    opacity: 0;
    transition: opacity 1s;
}
.two.active:before {
    opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" class="one" value="Жми">
<div class="two"></div>

1
  • да я так и думал решить, но это мне столько ненужных элементов добавит...
    – engenes
    5 июл 2016 в 11:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.