Jak uzyskać powoli rozwijanego diva

Question

Witam

Poproszę o propozycję jak mogę dodać do stworzonego już rozwijanego DIV-a efekt "powolnego rozwijania" a nie przeskoku.

Tu można zobaczyć kod:

https://codepen.io/ErektrycznyLuk/pen/qKKgbJ

Answer 1

transition nie działa na właściwość display. Możesz użyć np. height, visible, opacity. Złą praktyką jest mieszanie html, css, js. Te elementy powinny być od siebie oddzielone. Css w pliku ze stylemi css a js w pliku z js.

Comments

Trochę poprawiłem kod. Teraz mam oddzielony js który odpowiada za odkrywanie i zasłanianie diva ale wciąż nie wiem jak ustawić powolne rozwijanie.

---

Prawie rozdzielony. onclick zastąp addEventListener. I zmień display na coś innego.

---

<section class="price-box">
    <header class="header">
      <h1>Karta podatkowa / Ryczałt -
        <span class="font-price"> Od 50 PLN/M-C</span>
      </h1>
    <button class="btn">czytaj wiecęj</button>
    </header> 
      <article class="content"> 
        <p>Formy opodatkowania, jakimi są <span>karta podatkowa i ryczałt ewidencjonowany</span>, są najprostszymi formami księgowości podatkowej. Nie mniej jednak, przy ich prowadzeniu należy zwrócić uwagę na wiele istotnych aspektów, co pochłania sporo czasu i energii, dlatego też polecamy oddać to w ręce specjalistów.</p> 
        <h4>OFERTA:</h4>
        <ul class="price-box-list">
          <li>Prowadzimy niezbędne ewidencje</li>
          <li>Sporządzamy terminowo obowiązujące deklaracje</li>
          <li>terminowo obowiązujące deklaracje</li>
          <li>Asystujemy lub reprezentujemy Państwa w czasie kontroli skarbowej</li>
          <li>Przygotowujemy rozliczenie roczne</li>
        </ul> 
    </article> 
</section>

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
body {
    margin: 0;
    /* Background pattern from Subtle Patterns */
    background: url("http://www.sellaresga.com/wp-content/uploads/2017/04/Fotolia_56710032_Subscription_Monthly_M.jpg")no-repeat fixed;
    background-size: cover;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #333;
}
*{
  box-sizing: border-box;
  transition:all 2s;
}
.header:after{
    content: "";
    clear: both;
    display: table;
}
h1 {
    display: inline-block;
    font-size: 2em;
    color: #5994B2;
  margin-right: 100px;
}
.btn {
    color: white;
    width: 100px;
    margin: 35px 10px;
    cursor: pointer;
    text-align: center;
    padding: 10px 5px;
    background-color: #5994B2;
    border: none;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
  float: right;
}
.btn:hover{
    background-color: #427087;
}

h2 {
    font-size: 1.6em;
}

.price-box {
    display: block;
    width: 80%;
    margin: 20px auto;
    padding: 0 30px;
    border: 3px solid rgba(0, 08, 0, .2);
    border-radius: 10px;
   background-color: rgba(252, 252, 252, .6)
}
ul > li:first-child, ul > li:last-child{
  font-weight: 400;
}

ul > li:before{
  content:"\0027b2";
  margin-right: 5px;
  color: #5994B2;
  transition:all .5s;
}
ul > li:hover:before{
  color: #D19174;
}
.price-box-list{
    list-style-type: none;
    font-size: 1em;
    line-height: 200%;
    padding-left: 25px;
}
.content{
  height: 0px;
  overflow: hidden;
}
.content span{
  font-weight: 400;
}
h4 {
    font-size: 1.3em;
    font-weight: 700;
    color: #D19174;
    border-bottom: 1px solid black;
}

.font-price{
  white-space: nowrap;
}

var info = document.querySelector('.content'),
btn = document.querySelector('.btn');
btn.addEventListener("click",function(){
  // info.style.height=(info.style.height=='0px')?'370px':'0px';
  if (info.style.getPropertyValue("height") == "0px") {
        info.style.setProperty("height", "370px");
        btn.innerText = "zwiń" ;
    } else {
        info.style.setProperty("height", "0px");
        btn.innerText = "czytaj wiecęj" ;
    }
});

 

Answer 2

W3School:
https://www.w3schools.com/css/css3_transitions.asp

Powinieneś sobie poradzić

Comments

W sumie nie jestem pewny, czy nie mógłbyś wykorzystać Animacji w CSS by to osiągnąć, nie testowałem:
https://www.w3schools.com/css/css3_animations.asp

---

https://forum.pasja-informatyki.pl/34559/w3schools-nie-szerzmy-falszywej-propagandy

https://forum.pasja-informatyki.pl/298199/w3schools-ostatnie-slowo

https://www.webkrytyk.pl/2017/10/29/w3schools-com/

---

Mariuszu, nie przypisuje tutaj jakiejś nadmiernej wartości tej stronie, nie uznaje jej jako twórce standardów jak opisuje to jeden z artykułów. Kolega prosił o rozwiązanie problemu, dałem mu link gdzie może znaleźć na to sposób. Gdybyś poświęcił ten sam czas który poświęciłeś na wrzucenie tu tych linków, mógłbyś pomoc koledze jak zrobić to w bardziej profesjonalny sposób skoro w3school jest tak szkalowana.... Nie rozumiem ludzi

---

Mariuszu, nie przypisuje tutaj jakiejś nadmiernej wartości tej stronie, nie uznaje jej jako twórce standardów jak opisuje to jeden z artykułów.

I tutaj możesz się mylić. Widziałem już ludzi, którzy podali stronę z w3schools bo im było wygodnie (pierwszy wynik w google; poza tym wiedzieli że niekoniecznie piszą tam prawdę) a użytkownik rozwiązał problem, poszedł, następnego dnia przyszedł, znowu mu coś nie działało i pomyślał "Hmm... Jeśli Andrzej polecił mi tą stronę, to znaczy, że ona faktycznie musi być dobra i prezentować rzetelną wiedzę." i w taki oto sposób ta osoba zaczęła uważać w3schools jako wzorcową stronę internetową. 

---

Zwracasz uwagę na szkodliwiść treści serwisu w3schools podanych przez penerę(swoją drogą niezły nick). Ale nie zwróciłeś uwagi na bardzo złe praktyki użyte   przez autora pytania w kodzie.

---

Nie widziałem tego kodu więc nie wypowiem się na jego temat, jedyne co faktycznie rzuciło mi się w oczy to w3schools.

Answer 3

Znam właściwość transition i już kombinowałem jak ją użyć ale nic z tego nie wyszło.

Nie wiem czy nadaje się do rozwiązania mojego problemu.

 

W3School: - dzięki za info, nie słyszałem (do teraz)  będę wiedział jak do nie podchodzić :-)