Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

2023/12/07 176 users auto displayプロパティ height トリガー

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto... 続きを読む

React の新しい概念「トランジション」で React アプリの応答性を改善する - 30歳からのプログラミング

2022/01/02 160 users React プログラミング 応答性 新しい概念 アプリ

React v18 には多くの改善や新機能が盛り込まれる予定だが、そのなかでも特に注目を集めると思われるのが、Concurrent Features と呼ばれる一連の機能。 これらの機能を使うことで、コンポーネントのレンダリングについてより柔軟な設定が可能になり、上手く使えばパフォーマンスや UX の向上を実現できる。 この記事で... 続きを読む

アニメーションを使った効果的なモバイルなトランジション例 | UX MILK

2018/11/15 353 users アニメーション UX MILK ソフトウェアデベロッパー

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を... 続きを読む

iOS 純正メールアプリのUIがヤバイ件 — Medium

2016/04/23 287 users iOS medium 純正メールアプリ Slack ヤバイ件

社内のSlackでUI談義が突発的に始まることがあるのだけれども、以前そこで上がったiOS純正メールアプリのUIについてのネタがなかなか面白いのでまとめてみようと思った。結論から言うと、純正メールアプリ、ヤバイ。 まずは観察 メールの新規メッセージ画面は他の純正アプリではあまり見かけないようなトランジションを採用していて、開くと元の画面が少し後ろに下がってナビバーだけが見えつつもメッセージ画面が中... 続きを読む

jQuery Mobileを触りながら覚えよう！ - jsdo.it - Share JavaScript, HTML5 and CSS

2011/06/10 467 users jsdo.it jQuery Mobile エフェクト 属性

Tweet サンプルを用意しました！フォークしてjQuery Mobileを体験してみよう！ スマートフォンサイトをプレビューするには、エディタ画面の「Smart Phone Preview」ボタンをクリックしてください。 こんなことを試してみるとオススメ！ aタグに data-transition 属性を付加するとトランジションのエフェクトを選ぶことができます。 Footer要素を画面下に固定す... 続きを読む

オンラインプレゼンツール「Prezi」を使ってみたけど、これはすごいかも知れない

2009/10/29 379 users Prezi プレゼンソフト プレ デモ 既存

■ オンラインプレゼンツール「Prezi」を使ってみたけど、これはすごいかも知れない 少し前に話題になっていたけど使うチャンスがなかったオンラインプレゼンツール「Prezi」、社内でLTをする機会があったので使ってみた。いやぁ、これは相当面白いね。 サイトにあるデモを見ればどういう感じかわかると思うけど、ぱっと見ただけではトランジションが風変わりな普通のプレゼンソフトに見える。でもこれ、既存のプレ... 続きを読む