jquery / css: как реализовать стереть левую анимацию на цвет фона div - PullRequest
Новая
       23

jquery / css: как реализовать стереть левую анимацию на цвет фона div

1 голос
/ 25 ноября 2011

Вот мое css 

#Slide {
    background: none;
    height: 30px;
    width: 140px;
}
#Slide.Selected {
    background: #ff0;
}

Я хочу, чтобы всякий раз, когда я добавлял / удалял класс Selected в #Slide, свойство background-color анимировалось, когда вытирали слева / вытирали справа,Обычно цвет фона просто появляется и исчезает.Если это невозможно при использовании класса css, возможно ли это с помощью функции jquery .animate()?или может быть css3 transition property?

Есть предложения у кого-нибудь

Ответы [ 3 ]

2 голосов
/ 25 ноября 2011

Вы не можете сделать анимацию стирания на цвет фона с анимацией jQuery или CSS3.

Чтобы получить этот визуальный эффект, у вас есть несколько вариантов. Вы можете сделать стирание перехода на весь отдельный элемент, который расположен позади существующего элемента, так что он имитирует фон. Или же вы можете использовать фоновое изображение нужного цвета и размера и анимировать положение фона для имитации стирания.

1 голос
/ 07 ноября 2014

Вот функция wipe_left, которую я сделал, увидел ваш вопрос, когда искал свой собственный ответ: 

wipe_left($('.wipe-left'), $('.wipe-left').css('width'));

function wipe_left (elem, width) {
        elem.css('width', '0px');
        elem.css("left", width);
        elem.animate({
            width: width,
            left: '0px'
        }, 5000);
    }

<div class="wipe-left" style="position: relative; top: 0; left: 0; background-color: lightblue; width: 300px; height: 200px;">
        &nbsp;
</div>

Скрипка здесь: http://jsfiddle.net/LostInDaJungle/da16gx9n/1/

0 голосов
/ 22 ноября 2017

Эффект плавного стирания фона можно создать с помощью псевдоэлементов и переходов CSS.

Сначала вставьте фоновый псевдоэлемент в ваш основной контейнер. Затем, когда класс добавлен в контейнер, используйте преобразование, чтобы убрать этот фон. 

#slide:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  transition: transform 1s ease-in-out;
  background: teal;
}

#slide.on:before {
  transform: translateX(100%);
}


$("#slide").on("click", function() {
  $(this).toggleClass("on");
});
#slide {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 100px;
  background: salmon;
}

#slide .contents {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#slide:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  transition: transform 1s ease-in-out;
  background: teal;
}

#slide.on:before {
  transform: translateX(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slide">
  <div class="contents">Click me!</div>
</div>

Несколько небольших соображений:

  • Правила контейнера должны включать overflow: hidden и position: relative.
  • Псевдоэлементы будут складываться поверх непозиционированных узлов содержимого, поэтому любое видимое содержимое контейнера необходимо будет обернуть во второй элемент блока.

Пример на Codepen

...