最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

day05: Flex Panel Gallery

XAMPP下载 admin 479浏览 0评论
 使用者操作需求:
點擊個區塊後,會做展示的效果動畫。
效果動畫:點擊後放大該區塊接著滑入上下兩個區塊。

技術重點:
運用CSS做效果,JS控制

CSS: flex, transition, transform
JS: toggle(), transitionend
流程步驟:

CSS樣式處理:
.panels 裡面包了5個 .panel,這裡用的就是一層一層的 flex包下去

在外成標籤 .panels加上 display:flex; 使內層 .panel呈現水平排列,
內層 .panel加上 flex:1; 使其平均滿版分配於畫面中
在 .panel加上 display:flex並且轉換主籌線方向 flex-direction:columnu由水平轉為垂直,
主軸線置中 justify-content: center;
沒錯為了讓p裡的字也好對齊,再加上display:flex,主籌線置中 justify-content: center;
垂直線置中 align-items: center;
CSS動畫處理:

再來就是設定好預設,先將上下兩塊用 transform: translateY(xx) 位移到畫面外
當 添加上 .open-active的時候,又會再移回來 transform: translateY(0) 位移0回到原位
JS控制CSS動畫樣式:

選取所有的 .panel 監聽click事件 執行toggleOpen() 為該 .panel添加 .open樣式
並且再多加一個監聽 為transitionend事件,當執行 .open樣式時會觸發並且執行toggleActive() 為該 .panel添加 .open-active樣式
小技巧紀錄:

CSS 選取器”*” 選取所有元件,範例為選取該.panel內的所有元素
.panel > * { }
element.classList 返回element的class陣列值
可以使用add(),remove()
el.classList.add(“foo”, “bar”, “baz”);
el.classList.remove(“foo”, “bar”, “baz”);
e.propertyName可以抓到觸發 transitionend的屬性名稱
includes():
因為transition: flex 0.7s..這段在sarafi是flex,而其他瀏覽器為flex-grow
所以不能用e.property === ‘flex’來寫,但可利用.includes(‘flex’)來判斷,只要e.property`有包含到flex的字串就使其通過判斷,加入動畫效果。
function toggleActive(e) {
if (e.propertyName.includes(‘flex’)) {
this.classList.toggle(‘open-active’);
}
}

转载请注明:XAMPP中文组官网 » day05: Flex Panel Gallery

您必须 登录 才能发表评论!