From 34a39996987a02484caa932cdf38be8889f98289 Mon Sep 17 00:00:00 2001 From: soyaine Date: Fri, 30 Dec 2016 19:46:07 +0800 Subject: [PATCH 001/112] complete 05 practice --- 05 - Flex Panel Gallery/README.md | 91 +++++++++++ 05 - Flex Panel Gallery/index-FINISHED.html | 145 ++++++++++++++++++ 05 - Flex Panel Gallery/index-SOYAINE.html | 158 ++++++++++++++++++++ 05 - Flex Panel Gallery/index-SOYAINE2.html | 147 ++++++++++++++++++ 05 - Flex Panel Gallery/index-START.html | 119 +++++++++++++++ 5 files changed, 660 insertions(+) create mode 100644 05 - Flex Panel Gallery/README.md create mode 100644 05 - Flex Panel Gallery/index-FINISHED.html create mode 100644 05 - Flex Panel Gallery/index-SOYAINE.html create mode 100644 05 - Flex Panel Gallery/index-SOYAINE2.html create mode 100644 05 - Flex Panel Gallery/index-START.html diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md new file mode 100644 index 0000000..47547b9 --- /dev/null +++ b/05 - Flex Panel Gallery/README.md @@ -0,0 +1,91 @@ +# 05 Flex 实现可伸缩的图片墙 中文指南 + +> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 5 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) + +## 实现效果 + +![可伸缩的图片墙演示](https://d17oy1vhnax1f7.cloudfront.net/items/0t0Y0m3D1B1O3x3R2U1D/Screen%20recording%202016-12-30%20at%2006.17.47%20PM.gif) + +点击五张图片中的任意一张时，图片展开，同时图片中心的文字上下分别移入文字。点击已经展开的图片，图片被压缩，同时图片中上下两端的文字被挤走。若图片加载不出来[请点链接。](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif) + +## 初始文档 + +首先描述一下文档的 DOM 结构：以 `.panels` 为父 `div` 之下，有 5 个类名为 `.panel` 的 `div`，这 5 个各含有 3 个子 `p` 标签。 + +``` +.panels div +├── .panel, .panel1 div +| ├── p +| ├── p +| └── p +├── .panel, .panel2 div +| ├── p +| ├── p +| └── p +├── .panel, .panel3 div +| ├── p +| ├── p +| └── p +├── .panel, .panel4 div +| ├── p +| ├── p +| └── p +└── .panel, .panel5 div + ├── p + ├── p + └── p +``` + +display: flex; + + border: 1px solid #f00; + +## 延伸思考 + +在 index-FINISHED.html 的解决方案中，用了两种 `class` 值来分别控制 `div` 元素和 `p` 元素的动画，这就会造成一个问题，当快速点击两下时，会出现相反的组合（图片缩小 + 上下文字出现）。 + +那为什么还要将文字的移动动画用 `.open-actived` 这个类来控制，同时还多加上了一个 `transitionend` 的事件监听，而不是直接用 `.open` 控制文字的移动，并且只采用一个 `click` 事件监听呢？ + +我试了一下，发现如果将要触发的文字移动（`transform`）用 `.open` 来控制，那么会出现有点不协调的状况。 + +要找到问题所在，可以先研究一下动画效果，由于录 GIF 很容易掉帧，最好打开网页来看细节。 + +当拉伸图片时，首先往里压缩（阶段①），然后再展开（阶段②），而文字是阶段②出现的；而当压缩图片时，也是同样的道理，先微微拉开一点（阶段①），然后再往里缩（阶段②），文字也是在阶段②才往上移动的，这样就形成了一种被 pia 飞的效果。 + +这就解释了为什么我改动之后出现了不协调，此时看到的动画，像是文字主导了图片的压缩伸展，原因就是文字动画的时机不太对，找到了这个原因，就很好解决了。（见 [index-SOYAINE2.html]()） + +```css +.panel > * { + /* ... */ + transition:transform 0.5s 0.7s; +} + +.panel.open p:first-child { + transform: translateY(0); +} + +.panel.open p:last-child { + transform: translateY(0); +} +``` + +```js +const panels = document.querySelectorAll('.panel'); + +function toggleOpen(e) { + this.classList.toggle('open'); +} + +panels.forEach( panel => panel.addEventListener('click', toggleOpen, false)); +``` + +让 `p` 标签的文字动画效果延迟一下，添加 `transition` 属性的 `delay` 值，使其到图片变换的阶段②再发生，此处我选用了图片的动画最长时间 0.7s，圆满解决。 + +这样也就可以回答我最开始的疑问，为何要多添加一个 [`transitioned` 的事件监听](https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend)，这个事件会在 `transition` 结束之后被触发，所以目的是先让图片的压缩拉伸完成，再移动文字。 + +也就是说，如果出去字体大小的变化，具体的动画细节其实是这样的： +- 图片展开：微微压缩一段距离 -> 展开图片 -> 文字向中心移动 +- 图片压缩：微微展开一段距离 -> 压缩图片 -> 文字向上下移动 + +##### 挑战 5 Pass ~\(≧▽≦)/~ \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html new file mode 100644 index 0000000..243f8a2 --- /dev/null +++ b/05 - Flex Panel Gallery/index-FINISHED.html @@ -0,0 +1,145 @@ + + + + + Flex Panels 💪 + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + diff --git a/05 - Flex Panel Gallery/index-SOYAINE.html b/05 - Flex Panel Gallery/index-SOYAINE.html new file mode 100644 index 0000000..4606f8f --- /dev/null +++ b/05 - Flex Panel Gallery/index-SOYAINE.html @@ -0,0 +1,158 @@ + + + + + Flex Panels 💪 + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-SOYAINE2.html b/05 - Flex Panel Gallery/index-SOYAINE2.html new file mode 100644 index 0000000..7edd2c4 --- /dev/null +++ b/05 - Flex Panel Gallery/index-SOYAINE2.html @@ -0,0 +1,147 @@ + + + + + 解决方法二 - Flex Panels 💪 + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html new file mode 100644 index 0000000..04e974b --- /dev/null +++ b/05 - Flex Panel Gallery/index-START.html @@ -0,0 +1,119 @@ + + + + + Flex Panels 💪 + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + + + + From 5ae7fcecd56ff068958ddac61d360e0c12650578 Mon Sep 17 00:00:00 2001 From: soyaine Date: Fri, 30 Dec 2016 19:56:24 +0800 Subject: [PATCH 002/112] fix gif link --- 05 - Flex Panel Gallery/README.md | 4 ++-- README.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md index 47547b9..80a63af 100644 --- a/05 - Flex Panel Gallery/README.md +++ b/05 - Flex Panel Gallery/README.md @@ -5,9 +5,9 @@ ## 实现效果 -![可伸缩的图片墙演示](https://d17oy1vhnax1f7.cloudfront.net/items/0t0Y0m3D1B1O3x3R2U1D/Screen%20recording%202016-12-30%20at%2006.17.47%20PM.gif) +![可伸缩的图片墙演示](https://cl.ly/3j013w0H3L2s/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif) -点击五张图片中的任意一张时，图片展开，同时图片中心的文字上下分别移入文字。点击已经展开的图片，图片被压缩，同时图片中上下两端的文字被挤走。若图片加载不出来[请点链接。](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif) +点击五张图片中的任意一张时，图片展开，同时图片中心的文字上下分别移入文字。点击已经展开的图片，图片被压缩，同时图片中上下两端的文字被挤走。若图片加载不出来[请点链接](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif)，查看在线效果[请看这里。](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) ## 初始文档 diff --git a/README.md b/README.md index dc64544..a07b70d 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 2. [x] JS + CSS Clock [指南](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock) | [纯 JavaScript+CSS 时钟效果](http://soyaine.github.io/JavaScript30/02 - JS %2B CSS Clock/index-SOYAINE.html) 3. [x] CSS Variables [指南](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables) | [用 CSS 变量实现拖动控制参数效果](http://soyaine.github.io/JavaScript30/03%20-%20CSS%20Variables/index-SOYAINE.html) 4. [x] Array Cardio, Day 1 [指南](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201) | [数组基本操作方法示例](http://soyaine.github.io/JavaScript30/04%20-%20Array%20Cardio%20Day%201/index-SOYAINE.html) -5. [ ] Flex Panel Gallery +5. [x] Flex Panel Gallery [指南](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/README.md) | [可伸缩的图片墙在线效果](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) 6. [ ] Type Ahead 7. [ ] Array Cardio, Day 2 8. [ ] Fun with HTML5 Canvas From 3e096f760cccfbaac45a1393daf975945bc18b05 Mon Sep 17 00:00:00 2001 From: soyaine Date: Fri, 30 Dec 2016 20:03:09 +0800 Subject: [PATCH 003/112] update gif link --- 05 - Flex Panel Gallery/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md index 80a63af..007626d 100644 --- a/05 - Flex Panel Gallery/README.md +++ b/05 - Flex Panel Gallery/README.md @@ -5,7 +5,7 @@ ## 实现效果 -![可伸缩的图片墙演示](https://cl.ly/3j013w0H3L2s/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif) +![可伸缩的图片墙演示](https://cl.ly/0o191E0S1S2X/Screen%20recording%202016-12-30%20at%2006.17.47%20PM.gif) 点击五张图片中的任意一张时，图片展开，同时图片中心的文字上下分别移入文字。点击已经展开的图片，图片被压缩，同时图片中上下两端的文字被挤走。若图片加载不出来[请点链接](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif)，查看在线效果[请看这里。](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) From 35b4268cff3f40847c9833eeb726ce6923902fbb Mon Sep 17 00:00:00 2001 From: soyaine Date: Fri, 30 Dec 2016 20:35:05 +0800 Subject: [PATCH 004/112] update readme --- 05 - Flex Panel Gallery/README.md | 78 ++++++++++++--------- 05 - Flex Panel Gallery/index-SOYAINE2.html | 2 +- 2 files changed, 45 insertions(+), 35 deletions(-) diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md index 007626d..1ee34e3 100644 --- a/05 - Flex Panel Gallery/README.md +++ b/05 - Flex Panel Gallery/README.md @@ -9,38 +9,46 @@ 点击五张图片中的任意一张时，图片展开，同时图片中心的文字上下分别移入文字。点击已经展开的图片，图片被压缩，同时图片中上下两端的文字被挤走。若图片加载不出来[请点链接](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif)，查看在线效果[请看这里。](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) -## 初始文档 +另外描述一下初始文档的 DOM 结构：以 `.panels` 为父 `div` 之下，有 5 个类名为 `.panel` 的 `div`，这 5 个各含有 3 个子 `p` 标签。而相应的 CSS 样式中，动画的时间等特性已经设定好，只需要完成不同状态下的页面布局以及事件监听即可。 -首先描述一下文档的 DOM 结构：以 `.panels` 为父 `div` 之下，有 5 个类名为 `.panel` 的 `div`，这 5 个各含有 3 个子 `p` 标签。 +## 涉及特性 -``` -.panels div -├── .panel, .panel1 div -| ├── p -| ├── p -| └── p -├── .panel, .panel2 div -| ├── p -| ├── p -| └── p -├── .panel, .panel3 div -| ├── p -| ├── p -| └── p -├── .panel, .panel4 div -| ├── p -| ├── p -| └── p -└── .panel, .panel5 div - ├── p - ├── p - └── p -``` +- display: flex +- flex-direction +- justify-content +- transition +- transform: translateX/translateY +- element.classList.toggle +- transitionend 事件 display: flex; border: 1px solid #f00; +## 过程指南 + +### CSS 部分 + +CSS 在这个过程中占了重点，运用 `flex` 可以使各个元素按一定比例占据页面。 + +1. 将 `.panels` 设置为 `display:flex` +2. 设定每个子 panel 的 `flex` 值为 1 +3. 针对每个子 panel，控制其中的文字垂直、水平居中（单独看每个 panel，其中的文字也可以用 flex 的思路来使其三等分后居中） + 1. 设置 flex 的方向 + 2. 设置内部元素的布局方式 +4. 设定点击图片后文字移动的样式 +5. 设定点击图片展开后的图片的 `flex` 值 + +### JS 部分 + +1. 获取所有类名为 `panel` 的元素 +2. 为其添加 `click` 事件监听，编写触发事件调用的函数（给触发的 DOM 元素添加/去掉样式，实现拉伸/压缩的效果） +3. 为其添加 `transitionend` 事件监听，编写调用的函数（添加/去掉样式，实现文字的飞入/飞出效果） + +## 相关知识 + + + ## 延伸思考 在 index-FINISHED.html 的解决方案中，用了两种 `class` 值来分别控制 `div` 元素和 `p` 元素的动画，这就会造成一个问题，当快速点击两下时，会出现相反的组合（图片缩小 + 上下文字出现）。 @@ -53,7 +61,13 @@ display: flex; 当拉伸图片时，首先往里压缩（阶段①），然后再展开（阶段②），而文字是阶段②出现的；而当压缩图片时，也是同样的道理，先微微拉开一点（阶段①），然后再往里缩（阶段②），文字也是在阶段②才往上移动的，这样就形成了一种被 pia 飞的效果。 -这就解释了为什么我改动之后出现了不协调，此时看到的动画，像是文字主导了图片的压缩伸展，原因就是文字动画的时机不太对，找到了这个原因，就很好解决了。（见 [index-SOYAINE2.html]()） +这样也就可以回答我最开始的疑问，为何要多添加一个 [`transitioned` 的事件监听](https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend)，这个事件会在 `transition` 结束之后被触发，所以目的是先让图片的压缩拉伸完成，再移动文字。 + +也就是说，如果出去字体大小的变化，具体的动画细节其实是这样的： +- 图片展开：微微压缩一段距离 -> 展开图片 -> 文字向中心移动 +- 图片压缩：微微展开一段距离 -> 压缩图片 -> 文字向上下移动 + +这就解释了为什么我改动之后出现了不协调，此时看到的动画，像是文字主导了图片的压缩伸展，原因就是文字动画的时机不太对，找到了这个原因，就很好解决了。（见 [index-SOYAINE2.html](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html)） ```css .panel > * { @@ -61,6 +75,7 @@ display: flex; transition:transform 0.5s 0.7s; } +/* 修改 .open-actived -> .open .panel.open p:first-child { transform: translateY(0); } @@ -78,14 +93,9 @@ function toggleOpen(e) { } panels.forEach( panel => panel.addEventListener('click', toggleOpen, false)); +// 去掉对于 transitionend 的事件监听 ``` -让 `p` 标签的文字动画效果延迟一下，添加 `transition` 属性的 `delay` 值，使其到图片变换的阶段②再发生，此处我选用了图片的动画最长时间 0.7s，圆满解决。 - -这样也就可以回答我最开始的疑问，为何要多添加一个 [`transitioned` 的事件监听](https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend)，这个事件会在 `transition` 结束之后被触发，所以目的是先让图片的压缩拉伸完成，再移动文字。 - -也就是说，如果出去字体大小的变化，具体的动画细节其实是这样的： -- 图片展开：微微压缩一段距离 -> 展开图片 -> 文字向中心移动 -- 图片压缩：微微展开一段距离 -> 压缩图片 -> 文字向上下移动 +解决思路是让 `p` 标签的文字动画效果延迟一下，添加 `transition` 属性的 `delay` 值，使其到图片变换的阶段②再发生，此处我选用了图片的动画最长时间 0.7s，圆满解决。 -##### 挑战 5 Pass ~\(≧▽≦)/~ \ No newline at end of file +**挑战 5 Pass ~\(≧▽≦)/~** \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-SOYAINE2.html b/05 - Flex Panel Gallery/index-SOYAINE2.html index 7edd2c4..eddce8b 100644 --- a/05 - Flex Panel Gallery/index-SOYAINE2.html +++ b/05 - Flex Panel Gallery/index-SOYAINE2.html @@ -2,7 +2,7 @@ - 解决方法二 - Flex Panels 💪 + 改进后 - Flex Panels 💪 From 1cad4976cd916971ac9bc54273903da0f33d8b5b Mon Sep 17 00:00:00 2001 From: soyaine Date: Fri, 30 Dec 2016 21:03:26 +0800 Subject: [PATCH 005/112] update gif... --- 05 - Flex Panel Gallery/README.md | 24 ++++++++++++--------- 05 - Flex Panel Gallery/index-SOYAINE2.html | 2 +- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md index 1ee34e3..384b484 100644 --- a/05 - Flex Panel Gallery/README.md +++ b/05 - Flex Panel Gallery/README.md @@ -5,7 +5,7 @@ ## 实现效果 -![可伸缩的图片墙演示](https://cl.ly/0o191E0S1S2X/Screen%20recording%202016-12-30%20at%2006.17.47%20PM.gif) +![可伸缩的图片墙演示](https://cl.ly/2O0f2D2A3i0B/Screen%20recording%202016-12-30%20at%2009.01.14%20PM.gif) 点击五张图片中的任意一张时，图片展开，同时图片中心的文字上下分别移入文字。点击已经展开的图片，图片被压缩，同时图片中上下两端的文字被挤走。若图片加载不出来[请点链接](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif)，查看在线效果[请看这里。](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) @@ -16,26 +16,22 @@ - display: flex - flex-direction - justify-content -- transition +- align-items - transform: translateX/translateY -- element.classList.toggle +- element.classList.toggle() - transitionend 事件 - -display: flex; - - border: 1px solid #f00; ## 过程指南 ### CSS 部分 -CSS 在这个过程中占了重点，运用 `flex` 可以使各个元素按一定比例占据页面。 +CSS 在这个过程中占了重点，运用 `flex` 可以使各个元素按一定比例占据页面。在调试的时候，可以把边框显示出来方便查看效果。（`border: 1px solid #f00;`） 1. 将 `.panels` 设置为 `display:flex` 2. 设定每个子 panel 的 `flex` 值为 1 3. 针对每个子 panel，控制其中的文字垂直、水平居中（单独看每个 panel，其中的文字也可以用 flex 的思路来使其三等分后居中） - 1. 设置 flex 的方向 - 2. 设置内部元素的布局方式 + 1. 设置 flex 的主轴 + 2. 设置内部元素的布局方式：居中 4. 设定点击图片后文字移动的样式 5. 设定点击图片展开后的图片的 `flex` 值 @@ -47,6 +43,14 @@ CSS 在这个过程中占了重点，运用 `flex` 可以使各个元素按一 ## 相关知识 +### [Flexbox](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) + +MDN 的图示如下： + +![MDN flexbox](https://mdn.mozillademos.org/files/12998/flexbox.png) + + + ## 延伸思考 diff --git a/05 - Flex Panel Gallery/index-SOYAINE2.html b/05 - Flex Panel Gallery/index-SOYAINE2.html index eddce8b..11a778f 100644 --- a/05 - Flex Panel Gallery/index-SOYAINE2.html +++ b/05 - Flex Panel Gallery/index-SOYAINE2.html @@ -60,7 +60,7 @@ .panel > * { margin: 0; width: 100%; - transition:transform 0.5s 0.9s; + transition:transform 0.5s 0.7s; align-items: center; display: flex; flex: 1 0 auto; From da54ae2acf92bad3bed96bfdee9edc34e3f6b3a5 Mon Sep 17 00:00:00 2001 From: soyaine Date: Fri, 30 Dec 2016 21:08:48 +0800 Subject: [PATCH 006/112] test for qiniu --- 05 - Flex Panel Gallery/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md index 384b484..505228a 100644 --- a/05 - Flex Panel Gallery/README.md +++ b/05 - Flex Panel Gallery/README.md @@ -5,7 +5,7 @@ ## 实现效果 -![可伸缩的图片墙演示](https://cl.ly/2O0f2D2A3i0B/Screen%20recording%202016-12-30%20at%2009.01.14%20PM.gif) +![可伸缩的图片墙演示](http://ofjku7mlm.bkt.clouddn.com/Screen%20recording%202016-12-30%20at%2009.01.14%20PM.gif) 点击五张图片中的任意一张时，图片展开，同时图片中心的文字上下分别移入文字。点击已经展开的图片，图片被压缩，同时图片中上下两端的文字被挤走。若图片加载不出来[请点链接](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif)，查看在线效果[请看这里。](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) @@ -30,7 +30,7 @@ CSS 在这个过程中占了重点，运用 `flex` 可以使各个元素按一 1. 将 `.panels` 设置为 `display:flex` 2. 设定每个子 panel 的 `flex` 值为 1 3. 针对每个子 panel，控制其中的文字垂直、水平居中（单独看每个 panel，其中的文字也可以用 flex 的思路来使其三等分后居中） - 1. 设置 flex 的主轴 + 1. 设置 flex 的主轴方向 2. 设置内部元素的布局方式：居中 4. 设定点击图片后文字移动的样式 5. 设定点击图片展开后的图片的 `flex` 值 From 2217ab7e3fb73f4d268d5750c03f006552d5d62c Mon Sep 17 00:00:00 2001 From: soyaine Date: Sat, 31 Dec 2016 09:04:26 +0800 Subject: [PATCH 007/112] test for img tag --- 05 - Flex Panel Gallery/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md index 505228a..a10e737 100644 --- a/05 - Flex Panel Gallery/README.md +++ b/05 - Flex Panel Gallery/README.md @@ -5,7 +5,9 @@ ## 实现效果 -![可伸缩的图片墙演示](http://ofjku7mlm.bkt.clouddn.com/Screen%20recording%202016-12-30%20at%2009.01.14%20PM.gif) + + + 点击五张图片中的任意一张时，图片展开，同时图片中心的文字上下分别移入文字。点击已经展开的图片，图片被压缩，同时图片中上下两端的文字被挤走。若图片加载不出来[请点链接](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif)，查看在线效果[请看这里。](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) From 4cb541a74231faa655a6b118dd1b3c705f93b2da Mon Sep 17 00:00:00 2001 From: soyaine Date: Sat, 31 Dec 2016 10:08:48 +0800 Subject: [PATCH 008/112] smaller img --- 05 - Flex Panel Gallery/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md index a10e737..2e19fe6 100644 --- a/05 - Flex Panel Gallery/README.md +++ b/05 - Flex Panel Gallery/README.md @@ -7,9 +7,9 @@ - + -点击五张图片中的任意一张时，图片展开，同时图片中心的文字上下分别移入文字。点击已经展开的图片，图片被压缩，同时图片中上下两端的文字被挤走。若图片加载不出来[请点链接](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif)，查看在线效果[请看这里。](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) +点击五张图片中的任意一张时，图片展开，同时图片中心的文字上下分别移入文字。点击已经展开的图片，图片被压缩，同时图片中上下两端的文字被挤走。若图片加载不出来[请点链接看更完整的演示图片](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif)，在线效果[请点这里。](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) 另外描述一下初始文档的 DOM 结构：以 `.panels` 为父 `div` 之下，有 5 个类名为 `.panel` 的 `div`，这 5 个各含有 3 个子 `p` 标签。而相应的 CSS 样式中，动画的时间等特性已经设定好，只需要完成不同状态下的页面布局以及事件监听即可。 @@ -69,7 +69,7 @@ MDN 的图示如下： 这样也就可以回答我最开始的疑问，为何要多添加一个 [`transitioned` 的事件监听](https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend)，这个事件会在 `transition` 结束之后被触发，所以目的是先让图片的压缩拉伸完成，再移动文字。 -也就是说，如果出去字体大小的变化，具体的动画细节其实是这样的： +也就是说，如果除去字体大小的变化，具体的动画细节其实是这样的： - 图片展开：微微压缩一段距离 -> 展开图片 -> 文字向中心移动 - 图片压缩：微微展开一段距离 -> 压缩图片 -> 文字向上下移动 @@ -81,7 +81,7 @@ MDN 的图示如下： transition:transform 0.5s 0.7s; } -/* 修改 .open-actived -> .open +/* 修改 .open-actived -> .open*/ .panel.open p:first-child { transform: translateY(0); } From 483cad470605041aa4f41a384c517170d1a705e8 Mon Sep 17 00:00:00 2001 From: soyaine Date: Sat, 31 Dec 2016 15:44:57 +0800 Subject: [PATCH 009/112] add the flex note --- 05 - Flex Panel Gallery/README.md | 53 +++++++++++++++++++++++-------- 1 file changed, 39 insertions(+), 14 deletions(-) diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md index 2e19fe6..8fc951d 100644 --- a/05 - Flex Panel Gallery/README.md +++ b/05 - Flex Panel Gallery/README.md @@ -5,20 +5,18 @@ ## 实现效果 - +![可伸缩的图片墙演示](https://cl.ly/1X1A320o0x1T/Screen%20recording%202016-12-31%20at%2010.06.10%20AM.gif) - +点击任意一张图片，图片展开，同时从图片上下两方分别移入文字。点击已经展开的图片后，图片被压缩，同时该图片上下两端的文字被挤走。若图片加载不出来，[请点链接看更完整的演示图片](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif)，在线效果[请点这里。](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) -点击五张图片中的任意一张时，图片展开，同时图片中心的文字上下分别移入文字。点击已经展开的图片，图片被压缩，同时图片中上下两端的文字被挤走。若图片加载不出来[请点链接看更完整的演示图片](https://d17oy1vhnax1f7.cloudfront.net/items/3J2r2G0p0C0h0q2c3R3p/Screen%20recording%202016-12-30%20at%2005.33.01%20PM.gif)，在线效果[请点这里。](http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) - -另外描述一下初始文档的 DOM 结构：以 `.panels` 为父 `div` 之下，有 5 个类名为 `.panel` 的 `div`，这 5 个各含有 3 个子 `p` 标签。而相应的 CSS 样式中，动画的时间等特性已经设定好，只需要完成不同状态下的页面布局以及事件监听即可。 +初始文档的 DOM 结构：以 `.panels` 为父 `div` 之下，有 5 个类名为 `.panel` 的 `div`，这 5 个各含有 3 个子 `p` 标签。而相应的 CSS 样式中，动画时间等特性已经设定好，只需要完成不同状态下的页面布局以及事件监听即可。 ## 涉及特性 - display: flex -- flex-direction -- justify-content -- align-items + - flex-direction + - justify-content + - align-items - transform: translateX/translateY - element.classList.toggle() - transitionend 事件 @@ -31,9 +29,11 @@ CSS 在这个过程中占了重点，运用 `flex` 可以使各个元素按一 1. 将 `.panels` 设置为 `display:flex` 2. 设定每个子 panel 的 `flex` 值为 1 -3. 针对每个子 panel，控制其中的文字垂直、水平居中（单独看每个 panel，其中的文字也可以用 flex 的思路来使其三等分后居中） - 1. 设置 flex 的主轴方向 - 2. 设置内部元素的布局方式：居中 +3. 针对每个子 panel，设为 `display:flex`，设置其 flex 主轴方向 +4. 控制 `.panle` 的子元素 `

` 中的文字垂直、水平居中（单独看每个 panel，其中的文字也可以用 flex 的思路来使其三等分后居中） + 1. 设置为 `display:flex` + 2. 设置 `flex` 值 + 2. 设置其子元素的布局方式：垂直水平居中（沿主轴、侧轴居中） 4. 设定点击图片后文字移动的样式 5. 设定点击图片展开后的图片的 `flex` 值 @@ -47,14 +47,39 @@ CSS 在这个过程中占了重点，运用 `flex` 可以使各个元素按一 ### [Flexbox](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) -MDN 的图示如下： +![MDN flexbox 图示](https://mdn.mozillademos.org/files/12998/flexbox.png) -![MDN flexbox](https://mdn.mozillademos.org/files/12998/flexbox.png) +这一个挑战的关键部分就在于理解如何使用 Flexbox，挑战的文档里嵌套了三个 flex 容器，作为弹性盒子，它们各自的作用是： +- `.panels`：使其中的 `.panel` 按横向的 flex 等分排布（此处为五等分） +- `.panel`：使其中的 `

` 按纵向的 flex 等分排布（此处为三等分） +- `p` ：借用 flex 相对于主轴及侧轴的对齐方式，使其中的文字垂直水平居中 +容易混淆不同 CSS 属性的应用对象，只需记住针对容器内子元素的特性较少（只有 5 个），可以这样联想：针对某一个具体的小元素进行设置，可供发挥的空间比较少，而针对 Flex 容器本身，有统筹大局的责任，故特性多一些。下面简单介绍一些基本的特性（没有完全列出）。 +#### 针对 Flex items 的特性（Children） + +- `flex-growth`：伸展值 +- `flex-shrink`：可接受的压缩值 +- `flex-basis`：元素默认的尺寸值 +- `flex`：以上三个值按顺序的缩写 + +#### 针对 Flex container 的特性（Parent） + +- `display: flex`：将这个元素设置成弹性盒子 +- `flex-direction`：主轴方向 + - `row`：横向 + - `column`：纵向 +- `justify-content`：沿主轴的的对齐方式 +- `align-items`：沿侧轴的对齐方式 +- `align-content`：子元素中文本沿侧轴的对齐方式（只有一行时无效） + +可以在下面两个地方试一下 Flex 的各种特性： + +- [http://demo.agektmr.com/flexbox/](http://demo.agektmr.com/flexbox/) +- [http://the-echoplex.net/flexyboxes/](http://the-echoplex.net/flexyboxes/) +- [http://codepen.io/justd/pen/yydezN](http://codepen.io/justd/pen/yydezN) - ## 延伸思考 在 index-FINISHED.html 的解决方案中，用了两种 `class` 值来分别控制 `div` 元素和 `p` 元素的动画，这就会造成一个问题，当快速点击两下时，会出现相反的组合（图片缩小 + 上下文字出现）。 From ebeabedb3cb85e0b3ef3c96a0451e5fae2e4a7fb Mon Sep 17 00:00:00 2001 From: soyaine Date: Sat, 31 Dec 2016 19:22:30 +0800 Subject: [PATCH 010/112] complete 06 exercise --- 05 - Flex Panel Gallery/README.md | 4 +- 06 - Type Ahead/index-SOYAINE.html | 83 ++++++++++++++++++++++++++ 06 - Type Ahead/style.css | 96 ++++++++++++++++++++++++++++++ 3 files changed, 181 insertions(+), 2 deletions(-) create mode 100644 06 - Type Ahead/index-SOYAINE.html create mode 100644 06 - Type Ahead/style.css diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md index 8fc951d..af61333 100644 --- a/05 - Flex Panel Gallery/README.md +++ b/05 - Flex Panel Gallery/README.md @@ -55,7 +55,7 @@ CSS 在这个过程中占了重点，运用 `flex` 可以使各个元素按一 - `.panel`：使其中的 `

` 按纵向的 flex 等分排布（此处为三等分） - `p` ：借用 flex 相对于主轴及侧轴的对齐方式，使其中的文字垂直水平居中 -容易混淆不同 CSS 属性的应用对象，只需记住针对容器内子元素的特性较少（只有 5 个），可以这样联想：针对某一个具体的小元素进行设置，可供发挥的空间比较少，而针对 Flex 容器本身，有统筹大局的责任，故特性多一些。下面简单介绍一些基本的特性（没有完全列出）。 +这里容易混淆的是不同 CSS 属性的应用对象，想区分很简单，只需记住针对容器内子元素的特性较少（只有 5 个），可以这样联想：针对某一个具体的小元素进行设置，可供发挥的空间比较少，而针对 Flex 容器本身，有统筹大局的责任，故特性多一些。下面简单介绍一些基本的特性（没有完全列出）。 #### 针对 Flex items 的特性（Children） @@ -74,7 +74,7 @@ CSS 在这个过程中占了重点，运用 `flex` 可以使各个元素按一 - `align-items`：沿侧轴的对齐方式 - `align-content`：子元素中文本沿侧轴的对齐方式（只有一行时无效） -可以在下面两个地方试一下 Flex 的各种特性： +可以在下面几个地方试一下 Flex 的各种特性： - [http://demo.agektmr.com/flexbox/](http://demo.agektmr.com/flexbox/) - [http://the-echoplex.net/flexyboxes/](http://the-echoplex.net/flexyboxes/) diff --git a/06 - Type Ahead/index-SOYAINE.html b/06 - Type Ahead/index-SOYAINE.html new file mode 100644 index 0000000..6df50f5 --- /dev/null +++ b/06 - Type Ahead/index-SOYAINE.html @@ -0,0 +1,83 @@ + + + + + Type Ahead 👀 + + + + +

+ +
    +
  • 输入词句，找一首诗
    • +
  • +
+
+ + + + + + + + + + + diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css new file mode 100644 index 0000000..7e7858f --- /dev/null +++ b/06 - Type Ahead/style.css @@ -0,0 +1,96 @@ + html { + box-sizing: border-box; + background:hsla(193, 30%, 64%, 0.78); + font-family:'Kaiti', 'helvetica neue'; + font-size: 20px; + font-weight: 200; + } + *, *:before, *:after { + box-sizing: inherit; + } + input { + width: 100%; + padding:20px; + font-family:'Kaiti', 'helvetica neue'; + } + + .search-form { + max-width:700px; + margin:50px auto; + } + + input.search { + margin: 0; + text-align: center; + outline:0; + border: 10px solid #F7F7F7; + width: 120%; + left: -10%; + position: relative; + top: 10px; + z-index: 2; + border-radius: 5px; + font-size: 40px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); + } + + + .suggestions { + margin: 0; + padding: 0; + position: relative; + /*perspective:20px;*/ + } + .suggestions li { + background:white; + list-style: none; + border-bottom: 1px solid #D8D8D8; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); + margin:0; + padding:20px; + transition:background 0.2s; + display:flex; + justify-content:center; + text-transform: capitalize; + } + + .suggestions li:nth-child(even) { + transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); + background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); + } + .suggestions li:nth-child(odd) { + transform: perspective(100px) rotateX(-3deg) translateY(3px); + background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); + } + + span.population { + font-size: 15px; + } + +span.info { + display: flex; + flex-direction: column; +} + span.author, span.title { + font-size: .8em; +/* right: 0;*/ + } + + .details { + text-align: center; + font-size: 15px; + } + + .hl { + background:hsla(193, 37%, 64%, 0.65); + } + + .love { + text-align: center; + } + + a { + color:black; + background:rgba(0,0,0,0.1); + text-decoration: none; + } From 2c959dcb7ee3e516f12b8bd9a12c746e452ba0e6 Mon Sep 17 00:00:00 2001 From: soyaine Date: Sat, 31 Dec 2016 21:54:00 +0800 Subject: [PATCH 011/112] new 06 file --- 06 - Type Ahead/README.md | 10 +++++ 06 - Type Ahead/index-FINISHED.html | 61 +++++++++++++++++++++++++++++ 06 - Type Ahead/index-SOYAINE.html | 13 ++++-- 06 - Type Ahead/index-START.html | 22 +++++++++++ 06 - Type Ahead/style.css | 8 +++- 5 files changed, 109 insertions(+), 5 deletions(-) create mode 100644 06 - Type Ahead/README.md create mode 100644 06 - Type Ahead/index-FINISHED.html create mode 100644 06 - Type Ahead/index-START.html diff --git a/06 - Type Ahead/README.md b/06 - Type Ahead/README.md new file mode 100644 index 0000000..06ef6d3 --- /dev/null +++ b/06 - Type Ahead/README.md @@ -0,0 +1,10 @@ +# 06 JS 实现快速匹配指南 + +> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 6 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) + +## 实现效果 + +![仿即时搜索诗句效果](https://cl.ly/3k3E0N3X3F3E/Screen%20recording%202016-12-31%20at%2009.34.26%20PM.gif) + +在输入框中输入一个词，迅速展示含有这个词的诗句。 \ No newline at end of file diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html new file mode 100644 index 0000000..5902b43 --- /dev/null +++ b/06 - Type Ahead/index-FINISHED.html @@ -0,0 +1,61 @@ + + + + + Type Ahead 👀 + + + + +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + + diff --git a/06 - Type Ahead/index-SOYAINE.html b/06 - Type Ahead/index-SOYAINE.html index 6df50f5..cb4f5eb 100644 --- a/06 - Type Ahead/index-SOYAINE.html +++ b/06 - Type Ahead/index-SOYAINE.html @@ -2,13 +2,13 @@ - Type Ahead 👀 + Ajax Type Ahead 👀
- +