Skip to content

Latest commit

 

History

History
74 lines (53 loc) · 3.29 KB

README.md

File metadata and controls

74 lines (53 loc) · 3.29 KB
Raw

HW2 - 讓畫面變得更動態：神奇的 CSS transition

Properties

  • hover至每一個項目時會有以下的transition
  • 在整個stream-item加上filter: contrast(125%) brightness(150%);做對比與亮度的增強
  • 在整個stream-item加上box-shadow: 5px 5px 20px 2.5px #323232;做邊框深灰陰影
  • 在content加上hover時背景為全黑無透明
  • 第一項目加入id="special"demo移過去一秒後發生hover效果
  • transition 這個屬性加在 .class 上跟加在 .class:hover 上面是不一樣，欲使移入移出皆有效果，就需要加在.class上
  • 加入一些sass語法

Question Set

1.你能不能試著做出另外一種 hover 的形式？例如說 hover 的時候背景顏色改變之類的

試著在preview下的content處加入如下程式，使content在hover時背景為全黑無透明

.content:hover {
    background-color: rgba(0, 0, 0, 1)
    transition: background-color .25s
}

2.我希望我滑鼠移上去之後過一秒才發生 hover 的效果，應該怎麼辦？

在:hover處加上transition-delay: 1s;

.stream-item:hover {
 box-shadow: 5px 5px 20px 2.5px #323232;
 filter: contrast(125%) brightness(150%);
 transition: box-shadow .25s, filter .5s;
}

#special:hover {
 transition-delay: 1s;
}

3.為什麼我們應該在使用 transition 的時候避免 transition: all？

I. performance不佳

II. 使用transition: all意義為「所有transition效果共享同樣的延續時間以及速率變換方式」，有時候會因為載入速度不一致而造成UX不佳

Yes, using transition: all could cause major drawbacks in performance. There can be a lot of cases where the browser would look if it needs to make a transition, even if user won't see it, like the color changes, dimension changes etc.

The simplest example I can think of is this: http://dabblet.com/gist/1657661 — try to change the zoom level or the font's size and you'll see that everything become animated.Of course there couldn't be a lot of such user interactions, but there could be some interface changes that can cause the reflow and repaints in some blocks, that could tell the browser to try and animate those changes.

So, in general, it's recommended that you won't use the transition: all and would use the direct transitions instead.

There are some other things that can go wrong with the all transitions, like the splash of animation on page load, where it would at first render the initial styles for blocks and then apply the style with an animation. In a lot of cases it wouldn't be the thing that you want :)


References

Delay :Hover in CSS3?

CSS3 Transition

CSS3 Transitions: Is “transition: all” slower than “transition: x”?


Troubleshooting

  • 目前只使用Chrome開發，在使用Safari檢視時transition稍微有些頓
  • 改為flexbox的關係，在寬度小於1400的display上會有排版上的bug

Demo

https://dezchuang.github.io/frontend-intermediate-course/answers/hw2/index.html