SVG can do THAT?!
//variable declaration for the global repeated animations const gear = $("#gear1, #gear2, #gear3"); ... //animation that's repeated for all of the sections function revolve() { let tl = new TimelineMax(); tl.add("begin"); tl.to(gear, 4, { transformOrigin: "50% 50%", rotation: 360, ease: Linear.easeNone }, "begin"); ... return tl; } const repeat = new TimelineMax({repeat:-1}); repeat.add(revolve())
新規Railsアプリに小さく導入するReact - Speaker Deck
dotsで開催されたReactの導入を検討されてる方向けの勉強会でお話しました https://eventdots.jp/event/597088
Dynamics.jsをReact.jsで使う - yuhei blog
物理法則に基づいたアニメーションを実装できるライブラリのDynamics.jsをReact.jsで使ってみた。 基本的にJSのアニメーションライブラリはDOMを直接操作するけど、React.jsを使う場合は実際のDOMと仮想のDOMとの整合性が崩れてしまうのでそれは推奨されない。 なので、アニメーションする値をstateで管理してやってみた。 import React from 'react'; import dynamics from 'dynamics.js'; class Box extends React.Component { constructor(props) { super(props); this.state = { x: 0, y: 0 }; } componentDidMount() { dynamics.animate(this.state, { x: 200, y
Animations with ReactTransitionGroup
While nearly any animation can be done in CSS, they tend to be more difficult to maintain once they reach a certain level of complexity. ReactTransitionGroup is the API upon which ReactCSSTransitionGroup is built. The main difference between the two is that ReactTransitionGroup animations are written in Javascript instead of CSS, and a callback is provided to be invoked when animations are complet
クラウドワークスで寿司を食べさせてもらうついでに、React+Reduxの導入状況について聞いてきた
クラウドワークスが、 社外のエンジニアに寿司をおごる企画をやっている というのを見かけて、寿司がタダで食べられるなら良いなと思い、なにも考えずに申し込んでみました。 1 選べる!寿司ランチ この企画は、寿司を食べながら対話するエンジニアを指名できるシステムになっています。筆者は、最近案件で使ったReact+Reduxや、RailsとReactを組み合わせて使うことに興味があったため、また、最近子供が生まれてリモートワーク制度を活用していたということで、そのあたりにも興味があり、 suzan2go さんを指名しました。suzna2goさんは、クラウドワークスの中でも、 Reactの普及にとくに熱心 なエンジニアだそうです。 寿司 こちらがクラウドワークスで提供していただいた寿司になります。 筆者もたまに出前する銀のさらの寿司 ごちそうさまでした。なお、お茶は出なかったので、ハックルベリーさん
React Patterns
React Patterns on GitHub # Get the latest React patterns, tips, and tricks right to your inbox. Translations # These translations are not verified and links are not endorsements. Chinese Element # Elements are anything inside angle brackets. <div></div> <Greeting /> Components return Elements. Component # Define a Component by declaring a function that returns a React Element. function Greeting()
Reduxでコンポーネントを再利用する - Qiita
Reduxはとりあえず使えるようになった後の情報が少ないように感じています。よく出回っているサンプルコードは「Real World 〜」のような名前がついていたとしても、あくまで雰囲気を味わうために用意されたものに毛が生えた程度で、現実に起こる問題に対する回答や指針を示しているわけではありません。業務で使うことを検討するのであれば、プロダクトの成長と共にどうやってスケールしていくかイメージできないと導入に踏み切れないですよね。本稿ではサンプルコードより大きな規模で開発していくために、Reduxにおけるコンポーネントの再利用について紹介します。 実現したいこと コンポーネントの再利用によってどのようなことを実現したいのかイメージしてもらうため、馴染みのあるアプリケーションの機能を具体例として挙げてみます。 Gmailで名前にマウスオーバーしたときに出るプロフィール情報 プロフィール画像の表示
Redux ExampleのTodo Listをはじめからていねいに(1) - Qiita
Reduxの公式ExampleにあるTodo Listを少しづつ書いてみました。 最終的な動作イメージは以下のような感じです。 Github Pagesにもあげていますので、触ってみてください。 基本的なReduxの説明や環境構築などは他のドキュメントに譲るとして、 ここでは各機能ごとに動くものを作りながら、最終的にExampleの形になることを目指します。 Reactがだいたい分かってて（チュートリアルをやったくらい）で、 Reduxを触り始めたくらいの人を対象としています。 Reduxを触り始めて日が浅いので、間違いもあるかと思います。ぜひご指摘ください。 ExampleのTodo Listの機能は次の3つです。 TodoをTodo Listに追加する「Add Todo」 Todoの完了・未完了を切り替える「Toggle Todo」 表示するTodo Listを完了または未完了のTod
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
