Переход CSS3, наведение для запуска анимации дочернего элемента не работает

Я хотел бы, чтобы мой элемент списка запускал переход css3 для своего дочернего элемента .pusher при наведении курсора. Я привык делать это в JS, а не в переходах css3, после прочтения некоторых других вопросов SO я подумал, что понял, как это сделать, но это работает неправильно:

#sidebar ul {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
#sidebar ul li {
    padding: 20px;
    position: relative;
    list-style: none;
    border-bottom: 1px solid #4a4a4a;
    cursor: pointer;
    -webkit-transition: max-width 0.5s ease;
    transition: max-width 0.5s ease;
}
#sidebar ul li a {
    color: #fff;
    z-index: 5;
    position: relative;
}
#sidebar ul li a:hover {
    text-decoration: none;
}
#sidebar ul li:hover > .pusher {
    max-width: 100px;
    height: 100%;
    background: #383838;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
#sidebar ul li:first-child {
    border-top: 1px solid #4a4a4a;
}

Pusher на самом деле добавляется к li с помощью JS, но я не думаю, что это должно вызвать проблему? (изменить: похоже, это не проблема)

скрипка: http://jsfiddle.net/8KpQW/


html css css-transitions
person Melbourne2991    schedule 09.02.2014    source источник
comment
Сделайте скрипку для вашей проблемы   -  person Vinay Pratap Singh    schedule 09.02.2014
comment
Вы можете попробовать тестовый пример с элементом .pusher, жестко запрограммированным в li, просто чтобы посмотреть, работает он или нет.   -  person jwatts1980    schedule 09.02.2014
comment
только что попробовал это сейчас на скрипке, @jwatts1980, к сожалению, это не сработало: jsfiddle.net/8KpQW   -  person Melbourne2991    schedule 09.02.2014
comment
Что должен делать .pusher?   -  person Paulie_D    schedule 09.02.2014

Ответы (2)


arrow_upward
4
arrow_downward

Вы не определили ширину для .pusher просто для max-width, поэтому он не знает, насколько широким он должен быть.

Попробуй это

Демонстрация JSFiddle

Извлечение CSS

.pusher {
    width:0;
    transition:width 0.5s ease;
}

#sidebar ul li:hover .pusher {
    width: 100px;
    height: 100%;
    background: #383838;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
person Paulie_D    schedule 09.02.2014
comment
кажется, нет никакого смягчения/перехода/анимации? - person Melbourne2991; 09.02.2014
comment
для «внутреннего»: наведите курсор :-) - person Martin Meeser; 07.09.2016

arrow_upward
0
arrow_downward

Код ниже исправил проблему для меня:

 #sidebar {
  height: 100%;
  margin-top: 74px;
  background: #303030;
  color: #fff;
}
#sidebar ul {
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
#sidebar ul li {
  padding: 20px;
  position: relative;
  list-style: none;
  border-bottom: 1px solid #4a4a4a;
  cursor: pointer;
}
#sidebar ul li a {
  color: #fff;
  z-index: 5;
  position: relative;
}
#sidebar ul li a:hover {
  text-decoration: none;
}
#sidebar ul li .pusher {
  height: 100%;
  width: 0px;
  background: #383838;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: width 0.2s ease-in-out;
  -moz-transition: width 0.2s ease-in-out;
  -o-transition: width 0.2s ease-in-out;
  transition: width 0.2s ease-in-out;
}
#sidebar ul li:hover > .pusher {
  width: 100%;
}

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

скрипка: http://jsfiddle.net/8KpQW/3/

person Melbourne2991    schedule 09.02.2014