CSS筆記(2017/06/10)

發表於 2017-06-10 更新於 2022-07-28 分類於 Frontend 閱讀次數： Disqus：

文字過長省略
過場動畫效果
- Animation 動畫效果參數解說

最近太久沒寫 blog 文章，覺得真的越來越懶惰了，趁著這個週末有點時間，來稍微紀錄一下最近忙的東西，從四月底到現在大致上做了些事情：

換工作前把原本考尚樂平台，增加一個可以讓老師們放上宣傳圖片的功能
跟佑鈞接了一個賣藥的網頁切版
跟阿宏交接一下國研院專利檢索平臺的專案
新工作的專案(Vue 2.0 + Vuex + vue-router)

當中做最多的應該還是 CSS 撰寫，以及使用 Vue 開發專案吧！而這次接案跟新工作中寫的 css 都用上了一點點小小的動畫效果，雖然後來接案的業主說：「動畫效果拿掉，改成靜態畫面」最後沒機會出現動畫效果，但開始跟 css animation 漸漸變熟了一些些，雖然還是要一直查資料，但是覺得有進步了。

文字過長省略

最近幾次的排版，常常會遇到標題文字，在某些版面會過長自動換行的情況，有時候為了版面對其，標題行只能給一行的高度，所以超過寬度的文字需要被省略，所以越來越長使用到這功能了，就稍微紀錄一下。如果文字要兩行的高度，就不適用了，唯一作法就是把文字區塊高度設定成兩倍行高，讓超過的文字被隱藏。

@mixin ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


.title {
    font-size: 24px;
    @include ellipsis;
}

Codepen 上的範例

See the Pen ellipsis by soar_lin (@SoarLin) on CodePen.

過場動畫效果

雖然寫了兩三次，還是覺得很難掌握，只好有空多練習了，所以在 codepen 上做了一個範例，順便附上一些過程中用到的工具、網站

CSS Pattern Generator，用來製作重複圖樣背景還不錯，缺點是無法做太大的重複區塊
CSS EASING ANIMATION TOOL，用來製作過場時間函示(transition-timing-function)還不錯

目前用的招式很普通，先把要做動畫的物件寫出來後，透明度設定成 0, 然後透過 js 將寫好的動畫 css 加到物件內，然後再設定個 Timeout 在動畫持續時間結束後，也把動畫 css 移除

部分參考範例 code

span.hint {
    opacity: 0;
    animation: hint-show-hide 1.5s ease 0s 1 normal forwards;
}

@keyframes hint-show-hide {
    0% {
        opacity: .3;
        top: -10px;
    }
    80% {
        opacity: 1;
        top: -25px;
    }
    100% {
        opacity: .5;
        top: -26px;
    }
}

Animation 動畫效果參數解說

其實我大概常會用到，就只有幾個

Name	說明
animation-name	動畫效果 @keyframes 名稱
animation-duration	動畫一次週期的時間, e.g. 1s, 300ms
animation-timing-function	動畫轉變時時間的加速曲線, e.g. ease, ease-in-out
animation-fill-mode	元素在動畫播放外(動畫開始前及結束後)的狀態 e.g. forwards(停在最後), backwards(停在最初)