Установить элемент отрицательной «левой» позиции точно его ширину с помощью CSS3

Question

Я скрываю элемент встроенного блока внутри родительского элемента div с overflow:hidden. Затем я смещаю исходный дочерний элемент, используя свойство left (негатив), поэтому он скрыт. Я могу заставить его раскрыться в родительском объекте с помощью переходов CSS3, но мне нужно придать этому отрицательному смещению довольно большое число (ширину родительского элемента div), чтобы время зависело от количества текста. Мне нужно, чтобы он был идеальным (по причинам, не объясненным здесь). Было бы идеально, если бы значение left всегда совпадало со значением ширины элемента inline-block.

Есть ли способ найти ширину элемента встроенного блока и применить это значение к его левому смещению в CSS3?

У меня такое чувство, что мне придется использовать jQuery, я просто надеюсь, что у кого-то здесь может быть замечательное решение. :)

Пример здесь: http://jsfiddle.net/RD7Yv/1/

Answer 1

Если вы просто хотите «раскрыться в родительском элементе с помощью переходов CSS3», кажется, что было бы проще вообще не перемещать элемент и просто анимировать его видимость на месте. Например, вот анимация его непрозрачности:

http://jsfiddle.net/jfriend00/BqmQK/

Все, что мы используем для JS - это добавление / удаление класса из элемента, а CSS3 делает для нас анимацию непрозрачности. Таким образом, элемент можно оставить в исходной позиции, и нам не нужно делать никаких расчетов размера или позиции.

Эту же анимацию можно выполнить даже без JavaScript, если она запускается при наведении курсора.

Если вы хотите, чтобы изображение скользило, вы можете установить его начальное положение:

left: -100%;

и анимировать его:

left: 0;

Вы можете видеть, что работает здесь: http://jsfiddle.net/jfriend00/P2H4Z/

Answer 2

попробуй left:-100%, это должно сработать.

EDIT: скрипка