wip: view transition

[syuilo]

What

Why

Additional info (optional)

Checklist

• Read the contribution guide
• Test working in a local environment
• (If needed) Add story of storybook
• (If needed) Update CHANGELOG.md
• (If possible) Add tests

[syuilo]

Chromeで試してるけど、画面全体のクロスフェードは行われるけど要素間の遷移が行われない(view-transition-nameは適切に設定されている)

[codecov]

Codecov Report

Attention: Patch coverage is 89.65517% with 3 lines in your changes missing coverage. Please review.

Project coverage is 15.39%. Comparing base (9dce512) to head (be16622).

Files with missing lines	Patch %	Lines
packages/frontend/src/pages/notifications.vue	0.00%	2 Missing ⚠️
packages/frontend/src/pages/timeline.vue	0.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##           develop   #15642       +/-   ##
============================================
- Coverage    41.92%   15.39%   -26.54%     
============================================
  Files         1624      786      -838     
  Lines       165871    72196    -93675     
  Branches      4106     1278     -2828     
============================================
- Hits         69540    11113    -58427     
+ Misses       95854    60659    -35195     
+ Partials       477      424       -53     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[syuilo]

9dce512
こういうページ間ではなくコンポーネントの状態が変わるだけのシンプルなトランジションなら動いた

[syuilo]

universal.vue で RouterView を MkStickyContainer で包むのをやめたら動作した

[syuilo]

MkStickyContainer のままでも、それにあたってるスタイル(つまり以下)を消したら動作した

style="container-type: inline-size;"

と

.contents {
	flex: 1;
	height: 100%;
	min-width: 0;
	overflow: auto;
	overflow-y: scroll;
	overscroll-behavior: contain;
	background: var(--MI_THEME-bg);
	scroll-padding-top: 60px; // TODO: ちゃんと計算する
	scroll-padding-bottom: 60px; // TODO: ちゃんと計算する
}

[tai-cha]

ミニマムでcontainer-type: inline-size;とflex: 1;が消えたら動作してそう

[syuilo]

謎

[syuilo]

Blinkのバグかしら

[tai-cha]

overflow-yを消した場合にもtransitionしていそう
動きの制限があるとき正常に動作しない可能性