perf: MkImgWithBlurhashとMkMediaImageを最適化 (#10782)
* #10781 * fix tsconfig * fetch image?? * Revert "fetch image??" This reverts commit0925c28d5a
. * wip * Revert "wip" This reverts commitbe97c6cb88
. * loading="eager" * loading="eager" 2 * error * wip * wip * wip * wip * clean up * fix * 生成するworkerを1つにする? * clean up * use buraha * wip * smaller width, height * update buraha * clean up * fix * Update MkMediaImage.vue * Update MkImgWithBlurhash.vue * Revert "fix(frontend): センシティブ設定された画像を開くとき一瞬レイアウトが崩れる問題を修正" This reverts commit41e9aa6f9b
. * Update MkMediaList.vue * Update MkMediaList.vue * Update MkMediaList.vue * Update CHANGELOG.md * wait for decode * fix * ? * (test) remove container-type: inline-size; * Revert "(test) remove container-type: inline-size;" This reverts commit9448e64228
. * container-name * Revert "container-name" This reverts commit94385d3221
. * width: 100%; * improve performance * refactor * wip * WIP * wip * Revert "wip" This reverts commit36e3b75cab
. * Revert "WIP" This reverts commit05b729ef91
. * Revert "wip" This reverts commit0801e79361
. * #10860 * wip * no worker * Revert "no worker" This reverts commita9c49e4fb4
. * ✌️ * workerNumber固定は不要 --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
@@ -5,12 +5,9 @@
|
||||
<ImgWithBlurhash
|
||||
class="img layered"
|
||||
:transition="safe ? null : {
|
||||
enterActiveClass: $style.transition_toggle_enterActive,
|
||||
duration: 500,
|
||||
leaveActiveClass: $style.transition_toggle_leaveActive,
|
||||
enterFromClass: $style.transition_toggle_enterFrom,
|
||||
leaveToClass: $style.transition_toggle_leaveTo,
|
||||
enterToClass: $style.transition_toggle_enterTo,
|
||||
leaveFromClass: $style.transition_toggle_leaveFrom,
|
||||
}"
|
||||
:src="post.files[0].thumbnailUrl"
|
||||
:hash="post.files[0].blurhash"
|
||||
@@ -53,24 +50,16 @@ function leaveHover(): void {
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.transition_toggle_enterActive,
|
||||
.transition_toggle_leaveActive {
|
||||
transition: opacity 0.5s;
|
||||
transition: opacity .5s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.transition_toggle_enterFrom,
|
||||
.transition_toggle_leaveTo {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.transition_toggle_enterTo,
|
||||
.transition_toggle_leaveFrom {
|
||||
transition: none;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
Reference in New Issue
Block a user