Как анимировать «простую фильтрацию jquery» с помощью только css

Я пытаюсь анимировать элементы, когда они фильтруются javascript, но коды ниже не работают. Любое предложение? Это то, что у меня есть до сих пор. http://jsfiddle.net/ejkim2000/J7TF4/Как анимировать «простую фильтрацию jquery» с помощью только css

$("#ourHolder").css("animation","scaleUp 0.3s linear 0.4s forwards"); 

$("#ourHolder").css({"animation" : "scaleDown 0.3s linear 0.4s forwards"});

На второй мысли, есть ли другой способ, что я могу анимировать элементы, используя только CSS?

источник

2013-08-01 Kim

Я предлагаю вам сделать это с помощью переходов CSS. Я считаю, что это то, что вы пытаетесь сделать, но я не могу найти ссылку «scaleDown» в любом месте. Мое решение одушевляет и ширину и высоту элементов .item при переключении дополнительного «.hidden» класса на них:

#ourHolder div.item.hidden { 
    transition: all 0.3s linear 
} 

#ourHolder div.item.hidden { 
    width: 0; 
    height: 0; 
    overflow: hidden; 
}

Полного решение на http://jsfiddle.net/5pKwy/

EDIT: Fiddle с использованием мин-высоты и рудной ширина:http://jsfiddle.net/5pKwy/1/

источник

2013-08-01 17:32:10

Привет, большое вам спасибо за ваш ответ. Это прекрасно работает. Тем не менее, есть ли способ, с помощью которого я могу использовать переход без использования определенной ширины и высоты в «#ourHolder div.item» – Kim

Нет, поскольку переход влияет на размеры элемента, для начала должен быть задан размер. Однако ничто не мешает вам использовать относительную ширину, т. Е. 25% вместо 200. –

С другой стороны, вы можете. Должна быть какая-то ширина и высота, но вы можете легко решить это, используя 'min-width' и' min-height'. Как и в этой обновленной скрипке: http://jsfiddle.net/5pKwy/1/ –

Как анимировать «простую фильтрацию jquery» с помощью только css

ответ

Смежные вопросы