CSSのアニメーション終了後にイベントを実行する | Monohibi - モノヒビ
CSSでアニメーションさせる方法としてanimationとtransitionの2つのプロパティがあります。 これらはJavaScriptと合わせることによって、アニメーション終了後にイベント処理を行うことができます。 イベントの種類 animationの場合 animationendをaddEventListenerに追加します。webkitの場合はwebkitAnimationEndにして追加します。 下記のコードは2秒間かけてshowという文字が表示された後に、alertの内容が表示されます。 HTML <div id="show">show</div> CSS @keyframes showAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } #show { animation: showAnimation 2s linear;
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説
JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ✨♻️ JavaScript Visualized: Event Loop by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: イベントループ イベントループは、JavaScriptデベロッパーが避けては通れない関門の1つですが、最初は理解しにくいかもしれません。私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います。 説明の前に、まずイベントループとは何でしょうか？ なぜ気にする必要があるのでしょうか？ JavaScriptはシングルスレッドで、一度に実行できるタスクは1つだけです。通常は問題ありませんが、30
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.map編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.map編〜 こんにちは、フロントエンドエンジニアのザワです。 気候や季節に影響されやすいので、夏にArrayという文字を見ると、「オーレーイ！」とラテンなノリで叫び出したくなる私です。 さて、今回のArrayシリーズは、Array.prototype.mapを取り上げます。 前回のspliceメソッドのとき、玄人感があるメソッドという風に紹介しました。今回のmapメソッドも玄人向け、というより、使ってるソースコードを見かけると、コイツ、デキると思ってしまうメソッドです。 後述しますが、配列をちゃかちゃかして新しい配列を作成するメソッドです。なので、APIからの値をごにょごにょして扱いやすい配列に整形するなど、使いこなせばなかなか活躍するシーンがあるのではないか、と期待させるヤーツです。 それ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
