0

Есть такой код. Смотрится тут он криво, но суть в том, что при нажатии input блок section становится видимым, но, я хочу, чтобы появлялся блок с эффектом (Медленное появление, или появление сверху вниз, все равно). Но у меня не получается. В чем может быть проблема? Первый раз использую эту функцию если что

section {
    transition-property: all;
    transition-timing-function: ease;
    transition-duration: 2s;
    display: none;
}
input {
  display: none;
}
label {
    display: block;
    width: 50px;
    height: 50px;
    padding: 2px;
    margin: 2px;
    background-color: #1a1a1a;
}
label img {
    position: relative;
    width: 50px;
    height: 50px;
    filter: grayscale(0.9);
    }
label img:hover {
    filter: grayscale(0);
    }
label:hover {
    color: #888;
    cursor: pointer;
}
input:checked + label img{
  filter: grayscale(0);
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
    transition-property: all;
    transition-timing-function: ease;
    transition-duration: 2s;
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    background: blue;
    transition: top 1s ease-out 0.5s;
}
<div class="preutx">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><img src="img/heroes/Ringo/double-down.png"></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><img src="img/heroes/Ringo/achilles-shot.png"></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><img src="img/heroes/Ringo/twirling-silver.png"></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><img src="img/heroes/Ringo/hellfire-brew.png"></label>

<!-- Content -->
<section id="content1">
    <p>
      Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
    </p>
    <p>
      Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
    </p>
  </section>
  <section id="content2">
    <p>
     yjeytjetyj rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
    </p>
    <p>
      Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare riyjtyjtyejy Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
    </p>
  </section>   </div>  

12
  • 1
    transition не работает с display: none; Пробуйте вместо display: none; прятать блок с помощьюopacity:0; z-index:1 и задать бэкграунд родителю 20 июн 2017 в 9:18
  • хмм а если высоту на 0 поставить но дисплей оставить?
    – Paul Wall
    20 июн 2017 в 9:18
  • Как вариант, только transition не любит автоматически рассчитанные величины анимировать, например height: auto в height: 20px 20 июн 2017 в 9:22
  • у меня получилось с height 0 в auto идет переход плавный. Подскажите, как сделать, чтобы при нажатии на другой input, этот переход был в обратную сторону, перед выходом нового контента?
    – Paul Wall
    20 июн 2017 в 9:23
  • задержку ( transition-delay ) используйте. В стилях по умолчанию задержка равна нулю, что бы схлопывался сразу, а в #tab1:checked ~ #content... ставьте равную скорости "схлопования" 20 июн 2017 в 9:27

2 ответа 2

1

Во-первых transition на display:none; не срабатывает...

display:(должен быть не)none;

Во-вторых тут не хватает запятой transition: top 1s ЗАПЯТАЯ ease-out 0.5s;

В третьих у вас тут в коде есть "top 1s", а почему не прописали позицию TOP:Npx;

В четвертых, если вы использовали display:none;, что-бы элемента не было видно, то лучше уж opacity

0

transition работает с visibility.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.