# 也許可以放點東西？
###### tags: `開工`

<!-- import"資訊欄"-->
{%hackmd WytMqepOTcKzqNFq7mXjLQ %}

:::success
:::spoiler Click to open TOC
[TOC]
:::

## 置中排版大補帖
> By. Mango

[https://www.w3.org/Style/Examples/007/center.en.html](https://www.w3.org/Style/Examples/007/center.en.html)

## 全域css調整

[https://hackmd.io/@2021ncu-fresh-code/S1VGtA7pd](https://hackmd.io/@2021ncu-fresh-code/S1VGtA7pd)

## 來自柏儒的貼心小提醒
1. 可以用美工組給的字型了，css加上font-family: 'reisyo'; 就有了
2. 串連後端api (假設原本是http://localhost:8000/test，現在只要打/api/test就可以了)
3. 跟企劃組討論的時候可以試試看用ngrok (https://ngrok.com/)

:::info
ngrok載完以後打

./ngrok http 3000

應該可以把測試的server公開到公網上讓企劃組看，不過速度頗慢。

執行概況

Forwarding前面的網址就是被公開的連結，每次啟動都會換掉，不用擔心
:::

## 沒有設計滾輪主頁可以使用的現有css

> 這是一個沒有設計滾輪往下滑的頁面可以使用的程式碼(或許往下滾的也可以)，我的classmain是整個頁面最外層的div
> [name=湯以謙]

> 我是用section分區段，基本上只要將每個height乘上section數量就可以直接用
> [name=大俠]

.main {
    margin-top: 8vh;
    height: 92vh;
    width: 100%;
    background-image: url("...");
    background-repeat: repeat;
    background-attachment: scroll, local;
    background-position: center;
    background-size: cover;
}
@media (max-height: 850px) {
    .main {
        margin-top: 11vh;
        height: 89vh;
    }
}

@media (max-height: 720px) {
    .main {
        margin-top: 13vh;
        height: 87vh;
    }
}

@media (max-height: 650px) {
    .main {
        margin-top: 14vh;
        height: 86vh;
    }
}

@media (max-height: 500px) {
    .main {
        margin-top: 15vh;
        height: 85vh;
    }
}

## Nuxt 動畫沒有觸發

如果兩個頁面設定的layout不一樣，可能會導致在page設定好的transition無效

Page A

export default {
    layout: "groups",
    transition: "group",
    methods: {
        ...
    }
}
<style lang="scss" scoped>
.group-leave-active {
    transition: 1.8s;
    opacity: 0;
}
</style>

Page B

export default {
    layout: "activities",
    methods: {
        ...
    }
}
<style lang="scss" scoped>
    ...
}
</style>

當A頁面跳轉到B頁面時不會觸發transition，如果在B頁面中加入`layout: "groups"`就能解決問題

補: `transition`的名稱設定也要相同

## 字型整理

標題: 各種書法字體

font-family: "kouzan", "aoyagireisyosimo_otf_2";

內文: 微軟正黑體

font-family: "Microsoft JhengHei";

## SVG Animation

一開始接到兩個筆刷的hover動畫，想著效果蠻常見也挺直覺的，後來才發現根本不是靠簡單的CSS Animation就可以解決的。

結論: 不要輕易答應企劃的動畫需求

> 0802更新
> 好啦還是來寫一下好了，感覺越來越多人遇到這個需求

### Why svg?

想要呈現筆刷圈選or平抹用CSS transform幾乎很難做到，svg可以透過path繪製筆刷的路徑，疊上遮罩(.png)，基本上可以完美解決企劃的要求了!

### Steps
1. 設定path
- https://www.oxxostudio.tw/articles/201406/svg-04-path-1.html
- https://yqnn.github.io/svg-path-editor/
2. 找你的美術要一個遮罩or自己生出一個遮罩
- 遮罩需由灰階色彩組成，下面是幾個遮罩範本
- 
- 

### 橫抹筆刷

<svg
    class="line_svg"
    id="course_line"
    viewBox="0 0 240 55"
>
    <defs>
        <mask id="line_mask" maskUnits="userSpaceOnUse">
            <image
                width="240"
                height="55"
                href="~/assets/documents/section2/line_mask.png"
            />
        </mask>
    </defs>
    <path d="m 10 10 l 250 0" />
</svg>

.line_svg {
    position: absolute;
    transform: scale(1.25);
    width: 80%;
    height: 80%;
    path {
        fill: none;
        stroke: #383227;
        stroke-width: 80;
        stroke-linecap: square;
        
        //筆刷速度
        stroke-dasharray: 4000 4000;
        stroke-dashoffset: 4000;
        
        mask: url(#line_mask);
    }
}
&:hover .line_svg {
    path {
        animation-duration: 6s;
        animation-name: line_anim;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
    }
}


@keyframes line_anim {
    to {
        stroke-dashoffset: 0;
    }
}

### 圈選筆刷

<svg
    class="circle_svg"
    id="course_circle"
    viewBox="0 0 250 125"
>
    <defs>
        <mask id="circle_mask" maskUnits="userSpaceOnUse">
            <image
                width="250"
                height="125"
                href="~/assets/documents/section2/circle_mask.png"
            />
        </mask>
    </defs>
    <path
        d="m 239 43 a 115 50 0 1 1 -61 -30"
    />
</svg>

.circle_svg {
    position: absolute;
    transform: scale(1.25);
    width: 100%;
    path {
        fill: none;
        stroke: #c48888;
        stroke-width: 50;
        stroke-linecap: round;
        
        //這兩項控制動畫速度
        stroke-dasharray: 2000 2000;
        stroke-dashoffset: 2000;
        
        mask: url(#circle_mask);
    }
}
&:hover .circle_svg {
    path {
        animation-duration: 1s;
        animation-name: circle_anim;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
    }
}


@keyframes circle_anim {
    to {
        stroke-dashoffset: 0;
    }
}

## 絕對位置在手機開小鍵盤的時候可能會跑版

除了強制固定body的大小，好像沒看到什麼比較好的方法。目前我是想辦法用flex container還有relative的子元素來調整。

## nuxt link問題

nuxt link的點擊事件要改用`@click.native`，但是使用emit仍然會有問題