Don
2023 年 7 月 19 日午後 8:04
1
← Fill in “repoName” and “repoURL” for the automatic install button →
← Describe this theme/component in one or two sentences →
このテーマコンポーネントは、トピックリストアイテムにホバーまたはクリックしたときに、素敵なアニメーションを追加します。
← Add more details and explain the settings (if applicable) →
こんにちは
コンポーネントにはスライダーローダーが必要です。
このコンポーネントは、行全体をクリック可能にし、トピックリストアイテムにクリックアニメーションを追加します。いくつかのアニメーションから選択できます。
push (タッチデバイスではデフォルト): クリックすると、押し込まれ、背景効果が追加されます。
background (非タッチデバイスではデフォルト): クリックすると、背景が追加されます…
slider : クリックすると、トピックリストアイテムの下にスライダーローダーが追加され、トップメインスライダーが非表示になります。
blur : クリックすると、リスト内の他のトピックがぼやけます。
テーマ設定
「いいね！」 23
Canapin
2023 年 7 月 19 日午後 8:07
2
コンポーネントをプレビューしたときに、何が変わったのかわからないほど自然に感じられ、見た目も自然でした。
デスクトップでクリックしたとき、または読み込み中にプッシュアニメーションを実装することは可能でしょうか、それとも何かそれを妨げるものはありますか？
「いいね！」 6
Don
2023 年 7 月 19 日午後 8:16
3
このアイデアは、タッチデバイスで自然なアプリのようなタップをすることです。そのため、タッチデバイスであればデスクトップビューでもプッシュアニメーションは機能します。
しかし、タッチデバイス以外でも簡単に機能させることができると思います。おそらく追加の設定の価値があるでしょう。
「いいね！」 4
Don
2023 年 7 月 20 日午後 9:51
4
「いいね！」 2
Lilly
2023 年 7 月 20 日午後 11:24
5
いつもながら、素晴らしい出来栄えですね。ドンさん、お見事です。
「いいね！」 2
素晴らしい出来栄えですね、ドン！ Topic List Thumbnails で試してみましたが、ほとんどの場合、すぐに動作しました。プッシュとブラーは期待どおりに機能しましたが、スライダーはサムネイルに追従するのではなく、すべてのサムネイルの一番上に表示され、背景は何も機能しません（これは理にかなっています）。もう少し手を加える可能性はありますか？デスクトップでスライダーを使いたいのですが、あるいは、あなたが思いつくであろう他の素晴らしいアイデアでも構いません！
「いいね！」 1
Don
2023 年 7 月 21 日午後 5:00
9
Davidさん、こんにちは
アップデートをマージしました。Move topic slider loader from template to pseudo element by VaperinaDEV · Pull Request #5 · VaperinaDEV/topic-list-item-click-animation · GitHub
after-topic-list-item テンプレートのプラグインアウトレットを使用してスライダーを表示しましたが、Topic List Thumbnails コンポーネントはトピックリストにグリッドレイアウトを追加するため、プラグインアウトレットをトピックリストアイテムとして扱い、隣り合わせに配置してしまいます。そこで、ローダーをテンプレートから疑似要素に移動し、互換性を高めました。
z-index を追加し忘れていました。これは Topic List Thumbnail と一緒に表示するために必要です。コンポーネントを更新してください。
「いいね！」 1
ドン、ありがとうございます！試してみましたが、スライダーの色が正しくないようです。あるいはz-indexの問題でしょうか？このビデオのスライダーは金色であるべきですが、灰色になっています。第三の色であるべきだと思いますか？他のCSSは何も適用せずにテストしていることをお知らせしておきます。アップデート前に金色で表示されていたので、z-indexの問題だと考えています🤷🏼♂️
「いいね！」 1
Don
2023 年 7 月 22 日午前 7:01
11
サイトを確認したところ、z-indexの修正が含まれていない以前のバージョンを使用しています。コンポーネントを最新バージョンにアップデートしてください。
ドン、ありがとうございます。すべて問題なく動作しています。更新が早すぎたのかもしれません:crazy_face:
提案が1つあります。タッチ操作をしない場合のために、これをオフにするオプションを用意してください。スライダーを試してみましたが、デフォルトのスライダーがなくなり、UXの一貫性が損なわれるため、あまり気に入っていません。
「いいね！」 1
@Don - これを気に入りました！ Clickable Topic Theme Component のように、ホバー時に行/アイテム内のどこでもカーソルがポインターになるようにしたいです…
.topic-list-item:hover,
.latest-topic-list-item:hover {
cursor: pointer;
}
「いいね！」 2
@Don - 背景色 のホバー効果の設定は、従来のホバー 時ではなく、行/項目をクリックまたはタップした後にのみ有効になるようです（Clickable Topic Theme Component のように）。
「いいね！」 1
Don
2023 年 7 月 24 日午前 8:34
15
こんにちは、デビッドさん
素晴らしいアイデアですね。タッチデバイスと非タッチデバイスでそれぞれアニメーション（コンポーネント）をオフにする設定を追加するアップデートをマージしました。
これで、none オプションを選択すると、コンポーネントを完全にオフにすることができます。
「いいね！」 3
Don
2023 年 7 月 24 日午前 9:15
16
こんにちは @denvergeeks
このコンポーネントは現在、トピックリストのアイテム全体を行としてクリック可能にしています。そのため、最新のトピックリストアイテムはデフォルトで機能します。これが、カーソルがポインターとして表示されるのが非タッチデバイスのトピックリストアイテムのみである理由です。
コンポーネントは、非タッチデバイスとタッチデバイスを個別に処理します。背景は、非タッチデバイスではホバー時にアクティブになり、タッチデバイスではタップ後にアクティブになります。しかし、カーソルがある可能性のあるタッチスクリーンラップトップなどではホバーが機能しないため、更新が必要だと思います。デスクトップビューとポインターでもグローバルにアクティブにできると思います。
これらの変更をマージしました。
「いいね！」 1
Don:
コンポーネントにはスライダーローダーが必要です。
「スライダーローダー」への依存関係について、詳しく教えていただけますでしょうか。これは別のテーマ、プラグイン、JavaScriptライブラリ、またはその他のものですか？
「いいね！」 3
Canapin
2023 年 7 月 26 日午前 11:37
18
スライダーは新しいページ読み込みアニメーションです。Discourseでページを読み込むと、画面上部に横長のプログレスバーが表示されます。それがスライダーです。
現在はデフォルト設定になっていますが、page loading indicator設定で元の読み込みスピナーに戻すことができます。
「いいね！」 4
ドン、このスピナープリローダーで動作させる方法はありませんか？正直、フォーラムではスライダーローダーよりもスピナーローダーの方が好きです。
Don
2024 年 1 月 6 日午前 7:15
20
こんにちは
スライダーでのみ機能する理由は、トピックをクリックするとページコンテンツが即座にクリアされ、スピナーに変わるからです。そのため、アニメーションを実行する時間がありません。スライダーを使用すると、次のページを読み込んでいる間、現在のページにとどまることができるため、アニメーションを実行する時間があります。
コンポーネントにはスライダーローダーが必要です。
