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 87.50000% with 3 lines in your changes missing coverage. Please review.

Project coverage is 15.34%. Comparing base (d185785) to head (5fe23d3).

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.87%   15.34%   -26.53%     
============================================
  Files         1625      787      -838     
  Lines       166074    72403    -93671     
  Branches      4108     1279     -2829     
============================================
- Hits         69537    11109    -58428     
+ Misses       96093    60869    -35224     
+ Partials       444      425       -19     

☔ 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していそう
動きの制限があるとき正常に動作しない可能性

[syuilo]

動作確認用としてBBBBBにだけpaddingつけてAAAAAAより位置をずらしてたんだけど、paddingではなくmargin使ったら動いた