Ошибка перехода CSS не удалась

У меня есть div элементы с несколькими классами на моем сайте. Несколько классов - это просто, чтобы легко манипулировать в jQuery на основе природы div.Ошибка перехода CSS не удалась

Я расширяю и сворачиваю div на событии нажатия кнопки. Что хорошо работает, но почему-то переход не работает.

Я создал для себя скрипку, пожалуйста, Click here, чтобы проверить скрипку.

Я видел примеры transition, мой вопрос должен заключаться в том, чтобы переход всегда был на идентификаторах верхнего уровня? , таких как div или element-id.

Моего Css вида выглядит следующим образом (также доступен в скрипке)

.display{ 
    background-color: #a17917; 
} /* DIV */ 
.mytable td div.data-div{ 
    min-height:120px; 
    max-height:140px; 
    min-width:120px; 
    max-width:140px; 
    border: 1px solid black; 
    overflow:hidden; 
    position: relative; 
    transition: height 3s, width 3s; 
} 
.mytable td div.collapse{ 
    min-height:120px; 
    max-height:140px; 
    min-width:120px; 
    max-width:140px; 
} 
.mytable td div.expand{ 
    min-height:300px; 
    max-height:300px; 
    min-width:300px; 
    max-width:300px; 
}

На кнопке мыши, я просто добавить расширения класса Div и удалить класс коллапса (после проверки, если ДИВ уже развернут или нет).

источник

2016-10-13 progrAmmar

Я вижу, так что я могу использовать переход для min-height? Или я должен использовать свойство 'height'. – progrAmmar

У вас есть переход для height и width, но вы никогда не изменяете эти свойства. Самый простой, что я могу видеть, это переход all свойства

transition: all 3s;

https://jsfiddle.net/qvgLLe5k/6/

источник

2016-10-13 05:30:43 Phil

Большое спасибо за ответ. Можно ли использовать min-height для перехода в качестве значения? – progrAmmar

@progrAmmar Не понимаю, почему нет. Единственное, что вы не можете перевести (это огромная боль) - это 'height: auto'. Если вам это нужно, найдите StackOverflow для других ответов – Phil

DEMO

.mytable td div.data-div{ 
    min-height:120px; 
    max-height:140px; 
    min-width:120px; 
    max-width:140px; 
    border: 1px solid black; 
    overflow:hidden; 
    position: relative; 
    transition: all 3s ease /* change this */ 
}

источник

2016-10-13 05:33:20 4dgaurav

попробовать это одно:

.display{ 
    background-color: #a17917; 
} 
.mytable td div.data-div{ 
    min-height:120px; 
    max-height:140px; 
    min-width:120px; 
    max-width:140px; 
    border: 1px solid black; 
    overflow:hidden; 
    position: relative; 
    transition: all 3s; 
} 
.mytable td div.collapse{ 
    min-height:120px; 
    max-height:140px; 
    min-width:120px; 
    max-width:140px; 
} 
.mytable td div.expand{ 
    min-height:300px; 
    max-height:300px; 
    min-width:300px; 
    max-width:300px; 
}

DEMO HERE

источник

2016-10-13 05:39:46

Ошибка перехода CSS не удалась

ответ

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