Animacja css z display none do display block

Question

Witam. Muszę zrobić animację powolnego przejścia z display none do display block. Jendak nie mam zielonego pojęcia, jak się za to zabrać. Prosił bym o potrzebne 'funkcje' css'owe i wizje działania. Muszę to zrobić w CSS'ie. Mówiąc powolne przejście, mam na myśli powolną zmiane widoczności diva.

Answer 1

Why Transition properties does not work with display properties ?

CSS3 transition doesn't work with display property

display: none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead.

<div class="gui">
  <header>Kreator klas</header>
  <hr />
  <input type="text" placeholder="Nazwa klasy, np. 8c" />
</div>

.gui {
  position: relative;
  background: #ffffff;
  width: 732px;
  height: 266.666666667px;
  border: 2px solid #636363;
  border-radius: 0px 100px 0px 100px;
  box-shadow: -30px 30px 30px #000000;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%,-50%);
  transition: opacity 2s;
}

 

Nie "używam" TypeScript  , więc jest js.

window.onload = () => {
  const gui = document.querySelector('.gui');
  gui.style.opacity = 1;
}

 

Comments

VBService, to działa. Ale ponieważ nie jest to zmienianie display, to mam kolejny problem. Mianowicie dwa divy .gui nie mogą na siebie wejść. Przez co tworzą się jeden pod drugim. Nie mogę ustawić ani position absolute, ani position fixed, ponieważ wtedy na niskich rozdziałkach przy absolute element nie jest na środku i całego nie widać, a przy fixed po prostu całego nie widać. Jest jakieś rozwiązanie?

---

Mianowicie dwa divy .gui nie mogą na siebie wejść. Przez co tworzą się jeden pod drugim.

css: z-index

Nie mogę ustawić ani position absolute, ani position fixed, ponieważ wtedy na niskich rozdziałkach przy absolute element nie jest na środku i całego nie widać, a przy fixed po prostu całego nie widać.

css: @media screen  [ przyk.   ]

---

Zrobiłem tak:

div class="relative">
    <div class="gui" #IaddClass>
      <header>Kreator klas</header>
      <hr />
      <input type="text" placeholder="Nazwa klasy, np. 8c" />
  </div>
    <div class="gui" #IremoveClass>
      <header>Destruktor klas</header>
      <hr />
    </div>
  </div>

CSS:

.relative {
  position: relative;
}

a .gui ma position absolute. To działa. Dzięki!

Answer 2

właściwość - transition w CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

https://css-tricks.com/almanac/properties/t/transition/

Pozdrawiam i Powodzenia

Comments

Myślę że możesz pokombinować dodatkowo z :

opacity , visibility

---

@niezalogowany, mam coś takiego:

.gui {
  position: relative;
  background: #ffffff;
  width: 732px;
  height: 266.666666667px;
  border: 2px solid #636363;
  border-radius: 0px 100px 0px 100px;
  box-shadow: -30px 30px 30px #000000;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-75%);
  transition: opacity 1s display 1s;
}

i html:

  <div class="gui" style="display: none;" #IaddClass>
    <header>Kreator klas</header>
    <hr />
    <input type="text" placeholder="Nazwa klasy, np. 8c" />
  </div>

Gdy zmienie w TypeScripcie display na block, to nie pojawia się ten div powoli. Dlaczego?

---

Nie mam pojęcia Nie używam TypeScript 

Grzebnij głębiej może na Stacku ???

---

Wydaje mi się, że tu sprawa ma się tylko z CSS'em. Bo w TypeScripcie wygląda to tak:

  showGui(gui: HTMLDivElement) {
    gui.style.display = 'block';
  }

Czyli divowi zmieniam tylko "display: none" na "display: block".

Answer 3

Nie da się, display jest nieanimowalne. Musiałbyś pobawić się np. z visibility: hidden i opacity.

Jeśli koniecznie chcesz animować display, to musiałbyś całą logikę napisać ręcznie.