JavaScript30之04 – Flex酷炫相册

 

主要是学习理解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

1. toggle。 this.classList.toggle(‘open-active’); 相当于如果classList里没有这个class就add，如果有就remove