Javascript/CSS3 Transition

Question

Когда «изображение-полоса» зависает, он открывается на высоту его содержимого. Однако при этом он должен иметь плавный переход. Что я делаю не так? CSS3, похоже, не влияет на него.

Javascript:

<script type="text/javascript"> 
function hover(id) { 
document.getElementById(id).style.height="100%"; 
} 
</script> 

Стили:

#image-strip{ 
    width: 100%; 
    height: 300px; 
    float: left; 
    overflow: hidden; 
    transition: all 0.3s ease-in; 
    -webkit-transition: all 0.3s ease-in; 
    -moz-transition: all 0.3s ease-in; 
    -ms-transition: all 0.3s ease-in; 
    cursor: pointer; 
} 

#image-strip img{ 
    width: 100%; 
} 

HTML-:

<div id="image-strip" onmouseover="hover('image-strip')"><img src="images/content/1.jpg"></div> 

Answer 1

Пара вещей, первый один: Вы на самом деле может пройти 'это' в к вызову функции, потому что тогда у вас есть доступ к нему, и вам не нужно снова обращаться к DOM, сохраняя ti я и память, а не заметная сумма, но это лучшая практика. onmouseover="hover(this)"

function hover(el) { 
    el.style.height="100%"; 
} 

Вторая вещь:
CSS переходы предназначены для использования без Javascript, дело в том, чтобы не нужно JS манипулировать DOM так, чтобы получить переход на работу вы могли бы сделать:

#image-strip{ 
    width: 100%; 
    height: 300px; 
    float: left; 
    overflow: hidden; 
    transition: height 0.3s ease-in; 
    -webkit-transition: height 0.3s ease-in; 
    -moz-transition: height 0.3s ease-in; 
    -ms-transition: height 0.3s ease-in; 
    cursor: pointer; 
} 

#image-strip:hover { 
    height: 100%; 
} 

Вам нужно только перевести переход на свойства, которые вы хотите повлиять, а затем, когда элемент получит изменение состояния, например, наведите курсор, произойдет переход. Чтобы быть понятным, вам не нужен какой-либо Javascript для использования переходы, если вы не можете добавить или удалите элемент для перехода, но вам не нужен JS для того, что вы делаете. Надеюсь, это полезно.

Answer 2

<div id="image-strip" onmouseover="hover(this.id)"><img src="images/content/1.jpg"></div> 

ШАГ 2 -> Ваш CSS (модифицированный вам идентификатор класса -> # становится.)

.image-strip{ 
    width: 100%; 
    height: 300px; 
    float: left; 
    overflow: hidden; 
    transition: all 0.3s ease-in; 
    -webkit-transition: all 0.3s ease-in; 
    -moz-transition: all 0.3s ease-in; 
    -ms-transition: all 0.3s ease-in; 
    cursor: pointer; 
} 

ШАГ 3 -> JavaScript (просто добавить вы CSS класс)

function hover(id) { 
document.getElementById(id).classList.add('image-strip'); 
} 

Просто убедитесь, что вы делаете вышеуказанные изменения, Ваш код будет work.100% я была такая же проблема, LINK ->css bounce and add class in javascript

UPDATE 1 ->

Примените CSS с JavaScript,

document.getElementById(id).style.webkitTransitionDuration="0.6s"; 
document.getElementById(id).style.webkitTransitionTimingFunction="linear"; 
document.getElementById(id).style.cursor="pointer";