feat: make MkImgWithBlurhash transitionable
#10500
Conversation
Codecov Report
@@ Coverage Diff @@
## develop #10500 +/- ##
===========================================
+ Coverage 76.08% 78.39% +2.31%
===========================================
Files 898 165 -733
Lines 88742 20614 -68128
Branches 6268 374 -5894
===========================================
- Hits 67517 16161 -51356
+ Misses 21225 4453 -16772
|
|
Transitionの中でv-ifとv-showの同時使用はできないっぽい？ |
|
（ #10452 とちゃんぽんしたらblurhashから動かない |
|
単にマージミスってるわ |
|
#10452 といい感じにちゃんぽんしたいけど考えるのがだるい |
|
（トランジションいらないなら #10452 でいいんじゃね説すらある？） |
トランジションいらないってどういうことかよくわからんけど v-show 含めずに width height いじったらマージできない？ |
|
#10452 ではcover/containを画像と同一にしたのでトランジションが壊れているように見えることはなさそう あと#10452は高さ可変を実現するために position: absoluteを外してあるのでちょっとフラッシュが発生するなどする |
|
あー
トランジションが壊れているっていうのは
の際にホバー中に画像読み込みが走るのでタイミング如何でフラッシュすることを指している |
|
ホバーしたらすぐに表示したい画像は先に読み込んでおくのが楽じゃない…? |
そう？ |
|
外側でやってた切り替えをforceBlurhashで制御するってことかしら |
|
データセーブ時は本当に必要になるまで画像を読み込みたくなくて、愚直にやると先ほど述べたようなトランジションエラーがある |
|
トランジションエラーに遭遇したことがないのでよくわかってない（imgの読み込み遅延には遭遇するけどフラッシュするというのはちょっと違うような）
わかる どれをマージしてどれをマージしないかは私は判断できない（しゅいろが選ぶこと）な気がするのでこれ以上マージについて考えるのが面倒 |
https://6428f7d7b962f0b79f97d6e4-ttmyripqts.chromatic.com/?path=/story/components-mkgallerypostpreview--sensitive で回線速度落とすと再現できる 初回のホバーと二回目以降のホバーの挙動が違うのはエラーと解釈して良さそう
まぁそう |
|
コンポーネントの内側のトランジションの内容を外側から操作するとしたらどうするんだろうか |
|
トランジションにかける CSS をカスタマイズ可能にするってこと？ |
tamaina
changed the title
MkImgWithBlurhash animatableMkImgWithBlurhash transitionable
…misskey into blurhash-transition
… blurhash-transition
|
数日待って返答がなかったのでそうした |
|
普通に気づいてなかった
そのほうが色々やりやすそう |
|
forceBlurhashを使ってMkMediaImageをいい感じに書き換えられないかしら |
|
ここでまとめてやらんでもよくね |
|
思った通りposition: absoluteのせいで伸縮機能が完全に機能してない |
|
どこのこと？ |
|
MkMediaImageまわり |
|
修正しております |
|
いろいろ修正した |
|
とりあえずマージしたんだけど、canvasのコンテキストパージを明示しないとメモリリークする可能性あるんじゃねと思った |
|
87657d0 をプッシュし忘れたのでdevelopに突っ込んだ… |
* feat: make `MkImgWithBlurhash` animatable * refactor: split out transition styles * fix: bug * test: waitFor image loads * style: remove unused await * fix * fix type error --------- Co-authored-by: tamaina <[email protected]>
* feat: make `MkImgWithBlurhash` animatable * refactor: split out transition styles * fix: bug * test: waitFor image loads * style: remove unused await * fix * fix type error --------- Co-authored-by: tamaina <[email protected]>
What
MkImgWithBlurhashの切り替わりをトランジションにできるようにMkGalleryPostPreviewでホバー（→トランジション）中に画像の読み込みが始まるケースで見かけ上のトランジションを画像読み込み完了まで遅延させるWhy
トランジションが壊れているように見えるかもしれないため
Additional info (optional)
Checklist