diff options
Diffstat (limited to 'packages/frontend/src/components')
4 files changed, 17 insertions, 4 deletions
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue index a88311efa1..4af9d6baa2 100644 --- a/packages/frontend/src/components/MkReactionsViewer.vue +++ b/packages/frontend/src/components/MkReactionsViewer.vue @@ -1,6 +1,8 @@ <template> <div class="tdflqwzn" :class="{ isMe }"> - <XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/> + <TransitionGroup :name="$store.state.animation ? 'x' : ''"> + <XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/> + </TransitionGroup> </div> </template> @@ -20,6 +22,17 @@ const isMe = computed(() => $i && $i.id === props.note.userId); </script> <style lang="scss" scoped> +.x-move, .x-enter-active, .x-leave-active { + transition: opacity 0.2s cubic-bezier(0,.5,.5,1), transform 0.2s cubic-bezier(0,.5,.5,1) !important; +} +.x-enter-from, .x-leave-to { + opacity: 0; + transform: scale(0.7); +} +.x-leave-active { + position: absolute; +} + .tdflqwzn { margin: 4px -2px 0 -2px; diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue index 6a029d43c7..8ebfbe58e8 100644 --- a/packages/frontend/src/components/MkUrlPreview.vue +++ b/packages/frontend/src/components/MkUrlPreview.vue @@ -7,7 +7,7 @@ <iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&hideCard=false&hideThread=false&lang=en&theme=${$store.state.darkMode ? 'dark' : 'light'}&id=${tweetId}`"></iframe> </div> <div v-else class="mk-url-preview"> - <Transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in"> + <Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in"> <component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url"> <div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`"> </div> diff --git a/packages/frontend/src/components/MkUrlPreviewPopup.vue b/packages/frontend/src/components/MkUrlPreviewPopup.vue index a24aebe66f..a0ad3c7fdd 100644 --- a/packages/frontend/src/components/MkUrlPreviewPopup.vue +++ b/packages/frontend/src/components/MkUrlPreviewPopup.vue @@ -1,6 +1,6 @@ <template> <div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }"> - <Transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="emit('closed')"> + <Transition :name="$store.state.animation ? '_transition_zoom' : ''" @after-leave="emit('closed')"> <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/> </Transition> </div> diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue index a19103041c..6e297b9f5e 100644 --- a/packages/frontend/src/components/global/MkError.vue +++ b/packages/frontend/src/components/global/MkError.vue @@ -1,5 +1,5 @@ <template> -<Transition :name="$store.state.animation ? 'zoom' : ''" appear> +<Transition :name="$store.state.animation ? '_transition_zoom' : ''" appear> <div class="mjndxjcg"> <img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> <p><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p> |