Блог

Главная - Вопросы по программированию - Обратный переход CSS3 не вступает в силу

Обратный переход CSS3 не вступает в силу

#html #css #position #z-index #transition

#HTML #css #позиция #z-индекс #переход

Вопрос:

У меня есть создать два раздела, которые перекрываются с помощью z-index , и верхний из них будет уменьшаться по ширине, но я не могу заставить его уменьшаться справа налево, хотя я добавил animation-direction:reverse;

ПРИМЕР

Как мне изменить направление сжатия?

Ответ №1:

animation-direction здесь это не имеет значения. Это свойство относится к анимации css. Вы используете transition s. Две совершенно разные вещи.

Укажите .grow правильное значение позиции и поместите ваши текущие div файлы в контейнер с относительным расположением:

РАБОЧАЯ ДЕМОНСТРАЦИЯ

 <div class="pos_rel">
    <div class="holder"></div> 
    <div class="grow"></div>
</div>
  
 .grow {
    right:0;
}

Кроме того, вы, вероятно, должны иметь :hover на родительском элементе, чтобы предотвратить перемещение мыши из .grow при переходе:

ДЕМОНСТРАЦИЯ

 .pos_rel:hover .grow {
    width: 50px;
}

Ответ №2:

 http://jsfiddle.net/venkat7668/a4DUv/2/

Я немного изменил ваш код, чтобы получить ожидаемую анимацию.

 <div class="main">
    <div class="grow"></div>
    <div class="holder"></div>
<div>

.main {
    position: relative;
    width: 300px;
    height: 300px;
}
.holder {
    position:absolute;
    width: 300px;
    height: 300px;
    background:#cccccc;
    z-index:1;
}
.grow {
    width: 300px;
    height: 300px;
    background: green;
    -webkit-transition: width 5s;
    transition: width 5s;
    float:right;
    position:relative;
    z-index:2;
}
.grow:hover {
    width: 50px;
}