feat(frontend): MFM のアニメーション要素に delay オプションを追加 (#12659)
* Add delay option * Update CHANGELOG.md
This commit is contained in:
parent
f7eef546a6
commit
d7766162d6
|
@ -36,6 +36,7 @@
|
||||||
### Client
|
### Client
|
||||||
- Feat: 今日誕生日のフォロー中のユーザーを一覧表示できるウィジェットを追加
|
- Feat: 今日誕生日のフォロー中のユーザーを一覧表示できるウィジェットを追加
|
||||||
- Feat: データセーバーでコードハイライトの読み込みを削減できるように
|
- Feat: データセーバーでコードハイライトの読み込みを削減できるように
|
||||||
|
- Feat: MFMのアニメーション要素(`tada`, `jelly`, `twitch`, `shake`, `spin`, `jump`, `bounce`, `rainbow`)に `delay` オプションを追加
|
||||||
- Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336 #12560
|
- Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336 #12560
|
||||||
- Enhance: リアクション用ピン留め絵文字と投稿時の絵文字入力用ピン留め絵文字を分けて設定できるように #12560
|
- Enhance: リアクション用ピン留め絵文字と投稿時の絵文字入力用ピン留め絵文字を分けて設定できるように #12560
|
||||||
- Enhance: 絵文字のオートコンプリート機能強化 #12364
|
- Enhance: 絵文字のオートコンプリート機能強化 #12364
|
||||||
|
|
|
@ -107,22 +107,26 @@ export default function(props: MfmProps) {
|
||||||
switch (token.props.name) {
|
switch (token.props.name) {
|
||||||
case 'tada': {
|
case 'tada': {
|
||||||
const speed = validTime(token.props.args.speed) ?? '1s';
|
const speed = validTime(token.props.args.speed) ?? '1s';
|
||||||
style = 'font-size: 150%;' + (useAnim ? `animation: tada ${speed} linear infinite both;` : '');
|
const delay = validTime(token.props.args.delay) ?? '0s';
|
||||||
|
style = 'font-size: 150%;' + (useAnim ? `animation: tada ${speed} linear infinite both; animation-delay: ${delay};` : '');
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'jelly': {
|
case 'jelly': {
|
||||||
const speed = validTime(token.props.args.speed) ?? '1s';
|
const speed = validTime(token.props.args.speed) ?? '1s';
|
||||||
style = (useAnim ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
|
const delay = validTime(token.props.args.delay) ?? '0s';
|
||||||
|
style = (useAnim ? `animation: mfm-rubberBand ${speed} linear infinite both; animation-delay: ${delay};` : '');
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'twitch': {
|
case 'twitch': {
|
||||||
const speed = validTime(token.props.args.speed) ?? '0.5s';
|
const speed = validTime(token.props.args.speed) ?? '0.5s';
|
||||||
style = useAnim ? `animation: mfm-twitch ${speed} ease infinite;` : '';
|
const delay = validTime(token.props.args.delay) ?? '0s';
|
||||||
|
style = useAnim ? `animation: mfm-twitch ${speed} ease infinite; animation-delay: ${delay};` : '';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'shake': {
|
case 'shake': {
|
||||||
const speed = validTime(token.props.args.speed) ?? '0.5s';
|
const speed = validTime(token.props.args.speed) ?? '0.5s';
|
||||||
style = useAnim ? `animation: mfm-shake ${speed} ease infinite;` : '';
|
const delay = validTime(token.props.args.delay) ?? '0s';
|
||||||
|
style = useAnim ? `animation: mfm-shake ${speed} ease infinite; animation-delay: ${delay};` : '';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'spin': {
|
case 'spin': {
|
||||||
|
@ -135,17 +139,20 @@ export default function(props: MfmProps) {
|
||||||
token.props.args.y ? 'mfm-spinY' :
|
token.props.args.y ? 'mfm-spinY' :
|
||||||
'mfm-spin';
|
'mfm-spin';
|
||||||
const speed = validTime(token.props.args.speed) ?? '1.5s';
|
const speed = validTime(token.props.args.speed) ?? '1.5s';
|
||||||
style = useAnim ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
|
const delay = validTime(token.props.args.delay) ?? '0s';
|
||||||
|
style = useAnim ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction}; animation-delay: ${delay};` : '';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'jump': {
|
case 'jump': {
|
||||||
const speed = validTime(token.props.args.speed) ?? '0.75s';
|
const speed = validTime(token.props.args.speed) ?? '0.75s';
|
||||||
style = useAnim ? `animation: mfm-jump ${speed} linear infinite;` : '';
|
const delay = validTime(token.props.args.delay) ?? '0s';
|
||||||
|
style = useAnim ? `animation: mfm-jump ${speed} linear infinite; animation-delay: ${delay};` : '';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'bounce': {
|
case 'bounce': {
|
||||||
const speed = validTime(token.props.args.speed) ?? '0.75s';
|
const speed = validTime(token.props.args.speed) ?? '0.75s';
|
||||||
style = useAnim ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
|
const delay = validTime(token.props.args.delay) ?? '0s';
|
||||||
|
style = useAnim ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom; animation-delay: ${delay};` : '';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'flip': {
|
case 'flip': {
|
||||||
|
@ -195,7 +202,8 @@ export default function(props: MfmProps) {
|
||||||
}, genEl(token.children, scale));
|
}, genEl(token.children, scale));
|
||||||
}
|
}
|
||||||
const speed = validTime(token.props.args.speed) ?? '1s';
|
const speed = validTime(token.props.args.speed) ?? '1s';
|
||||||
style = `animation: mfm-rainbow ${speed} linear infinite;`;
|
const delay = validTime(token.props.args.delay) ?? '0s';
|
||||||
|
style = `animation: mfm-rainbow ${speed} linear infinite; animation-delay: ${delay};`;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'sparkle': {
|
case 'sparkle': {
|
||||||
|
|
Loading…
Reference in New Issue