LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Transitional Interfaces

List Item Adding Dumb Computer

  • list item
  • list item
  • list item
  • list item
  • list item
  • list item

Details View Dumb Computer

  • ...
  • ...
  • ...
  • List Summary →
  • ...
  • ...

List Summary

Blah blah blah

List Item Adding Brain Clue #1

  • list item
  • list item
  • list item
  • list item
  • list item
  • list item

Details View Brain Clue #1

  • ...
  • ...
  • ...
  • List Summary

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  • ...
  • ...

List Item Adding Brain Clue #2

  • list item
  • list item
  • list item
  • list item
  • list item
  • list item

Details View Brain Clue #2

  • ...
  • ...
  • ...
  • ...
  • List Summary

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

    ×
  • ...
CSS
* {
  box-sizing: border-box;
}
body {
  font: 12px/1.4 "Lucida Grande", Sans-Serif;
}
.example-row {
  overflow: hidden;
  margin-bottom: 50px;
}
.example {
  width: 50%;
  float: left;
  padding: 0 30px;
}
ul {
  list-style: none;
}
li {
  background: #e6e6e6;
  padding: 0 10px;
  overflow: hidden;
  margin-bottom: 2px;
  line-height: 2.5;
}
h1, h2, h3 {
  font: bold 36px Sans-Serif;
}
h1 {
  padding: 30px;
}
h2 {
  font-size: 24px;
  margin: 0 0 5px 0;
  letter-spacing: -1px;
}
h2 span {
  display: block;
  font-size: 16px;
  color: black !important;
}
h3 {
  font-size: 16px;
  margin: 0 0 5px 0;
}
.example-one h2, .example-two h2, .example-three h2 {
  color: #21c677;
}
.example-four h2, .example-five h2, .example-six h2 {
  color: #9e21fe;
}




.example-one .new-item {
  background: #aeec88;
}


.example-two .new-item {
  background: #aeec88;
  max-height: 0;
  opacity: 0;
  transform: scale(0);
  animation: growHeight 0.2s ease forwards;
}
@keyframes growHeight {
  to { 
    max-height: 50px;
    opacity: 1;
    transform: scale(1);
  }
}




.example-three ul {
  overflow: hidden;
}
.example-three .new-item {
  background: #dbc0f7;
  max-height: 0;
  opacity: 0;
  transform: translateX(-300px);
  animation: 
    openSpace 0.2s ease forwards,
    moveIn 0.3s 0.2s ease forwards;
}
@keyframes openSpace {
  to { 
    max-height: 50px;
  }
}
@keyframes moveIn {
  to { 
    opacity: 1;
    transform: translateX(0);
  }
}

.example-four {
  overflow: hidden;
}
#ex-four-button:hover {
  background: #ccc;
}
.hider {
  overflow: hidden;
}
.slider-wrap {
  width: 200%;
  position: relative;
  transition: transform 0.5s linear;
}
.slider-wrap.open {
  transform: translateX(-50.1%); 
}
.example-four ul {
  width: 50%;
}
.example-four .summary {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  padding: 20px;
}


.example-five .details {
  display: none; 
  line-height: 1.4;
  padding-bottom: 10px;
}
#ex-five-button {
  transition: background 0.2s ease;
}
#ex-five-button.open {
  background: #a8ffd5;
}
#ex-five-button.open .title {
  font-weight: bold;
}



.example-six .details {
  display: none; 
  line-height: 1.4;
  padding-bottom: 10px;
}
#ex-six-button {
  position: relative;
  transition: transform 0.2s ease;
}
#ex-six-button.open {
  background: #a8ffd5;
  padding: 20px;
  transform: 
    translateY(-60px)
    scale(2.8);
}
#example-six-list {
  transition: transform 0.2s ease;
}
#example-six-list.open {
  transform: 
    translateY(-40px)
    scale(0.4);
}
#example-six-list.open .title {
  font-weight: bold;
  font-size: 120%;
}
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-weight: bold;
  color: black;
  text-decoration: none;
  font-size: 25px;
  line-height: 1;
  display: none;
}
#ex-six-button.open .close-button {
  display: block;
}
JS
$("button").on("click", function() {
  var insertPoint = $(this).parent().find("li:nth-child(3)");
  
  $("
  • ", { 'text': "New Item", 'class': "new-item" }).insertAfter(insertPoint); }); $("#ex-four-button, #example-four-close").on("click", function() { $("#example-four-slider-wrap").toggleClass("open"); }); $("#ex-five-button").on("click", function() { $(this) .toggleClass("open") .find(".details") .slideToggle(); }); $("#ex-six-button").on("click", function() { $("#example-six-list").toggleClass("open"); $(this) .toggleClass("open") .find(".details") .slideToggle(); });
  • Host Instantly Drag and Drop Website Builder

     

    Description

    Re: this article https://medium.com/design-ux/926eb80d64e3
    Term
    Mon, 11/27/2017 - 22:12

    Related Codes

    Pen ID
    Pen ID
    Pen ID