Miten luodaan: taipumisvaikutus

Opi, miten luodaan taipuisia osia.

Venytettävä efekti

Napsauta tätä painiketta vaihtaaksesi venytettävän sisällön näkyvyyden välillä.

Jotain venytettävää sisältöä. Napsauta painiketta vaihtaaksesi venytettävän sisällön näkyvyyden välillä. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Kokeile itse

Luo venytettävä osaefekti

Vaihe 1 - Lisää HTML:

<button type="button" class="collapsible">Avaa venytettävä</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Vaihe 2 - Lisää CSS:

Aseta akustinen asetus:

/* Aseta painikkeen näyttötyyli, jota käytetään avataksesi ja sulkeaksesi koulutusmateriaalin */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Lisää painikkeelle taustaväri, kun sitä napsautetaan ja kun hiiren osoitin siirtyy siihen (liikkumista) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Aseta koulutusmateriaalin näyttötyyli. Huomaa: oletuksena piilotettu */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Vaihe 3 - Lisää JavaScript:

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Kokeile itse

Animaatiovaikutus (lippuvaikutus alaspäin)

Luo animoitu lippuvaikutus (alaspäin liikkuvaa) lisäämällä max-height: 0、overflow: hide ja max-height ominaisuus lisätään paneelin luokkaan.

Sitten, JavaScriptin avulla aseta laskettu max-height Vieritä sisältö alas, riippuen paneelin korkeudesta eri näytönsizessa:

esimerkki

<style>
.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>

Kokeile itse

Lisää ikoni

Lisää symboli jokaiselle painikkeelle, jotta voidaan nähdä, onko sovellettava sisältö auki vai suljettu:

esimerkki

.collapsible:after {
  content: '\02795'; /* 表示“加号”（+）的 Unicode 字符 */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* 表示“减号”（-）的 Unicode 字符 */
}

Kokeile itse