主要是学习理解flex。
.panels {
min-height: 100vh; /* 高度为浏览器视窗高度 */
overflow: hidden; /* 隐藏scrollbar */
display: flex;
}
.panel {
background: #6B0F9C;
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
color: white;
text-align: center;
align-items: center;
/* Safari transitionend event.propertyName === flex */
/* Chrome + FF transitionend event.propertyName === flex-grow */
transition:
font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
background 0.2s;
font-size: 20px;
background-size: cover;
background-position: center;
flex-grow: 1; /* flex-grow是它作为item的属性 */
display: flex; /* 这是他作为容器的属性 */
justify-content: center;
align-content: center;
flex-direction: column;
}
下面这段运用了一些特别一点的CSS选择器
/* Flex Children */
.panel>* { /* 通配符 */
margin: 0;
width: 100%;
transition: transform 2s;
flex: 1 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.panel>*:first-child { /* ">"选择子元素 */
transform: translateY(-100%); /* 往上偏移它的高度 */
}
.panel.open-active>*:first-child {
transform: translateY(0);
}
.panel p:nth-child(2) { /* panel类的 [后代] 中第二个p */
font-size: 4em;
}
JavaScript
- toggle。 this.classList.toggle(‘open-active’); 相当于如果classList里没有这个class就add,如果有就remove