cssアニメーションで JQueryのfadeIn fadeOutを実装する
最近、脱jQueryの流れがあるので、大好きではあるが今やっている案件は、jQueryを使わないで実装することにした。
そこで以外にめんどくさいのがfadeIn fadeOut。
jQueryでは、
opacity:1 → opacity:0 → display:none
display:block → opacity:0→ opacity:1
のようにやっているが
これを素のJSでやると結構めんど臭い。
どうしてもCSS + classをつけたり消したりで、実装したかったのだが
そもそも「display」 プロパティが css transitionや animationに対応したプロパティではないので
色々試したがうまくいかなかった。
そこで見つけたのが、「visibility」プロパティ。 普段、「display」プロパティの影に隠れて使うことがほぼなかったんだけど、 このプロパティは、 hiddenとvisibleの２つの値しか無いが、 transitionやanimationに対応していて
timing functionの値が(tf = 0) => hidden;
timing functionの値が(0 < tf <= 1) => vislble;
となる仕様なので、（以下参照）
https://www.w3.org/TR/css-transitions-1/#animtype-visibility
.hoge{
opacity:0;
visibility:hidden;
transition: opacity 0.3s , visibility 0.3s;
&.is-show {
opacity: 1;
visibility: visible;
}
こんな感じで実装ができました。 そういえば、tweenMaxのautoAlphaもvisibilityを使っていたなー。。
かなり便利。ありがとうvisibility
photoshop cc でPSDからテキストデータを抜いてくれるスクリプト『ps_bramustextexport』
【PS_Bramus.TextExport-1.3】なるものを見つけたので共有
◆スクリプトダウンロード先
https://www.bram.us/2008/03/16/ps_bramustextexport-13-automatically-export-all-text-layers-from-photoshop-psd-to-a-text-file/
◆インストール、使い方
Photoshopのテキストレイヤーからテキストを抽出する方法 – Web雑記帳。
「Photoshop上の文字をテキストファイル化、修正、PSに戻す」ができるPS_BRAMUS.TextConvert | ブロックワークス
インストールは、CCでは（Macです）、
/Applications/Adobe Photoshop CC 2017/Presets/Scripts
の中に、
/Applications/Adobe Photoshop CC 2017/Presets/Scripts/ps_bramustextexport-13/PS_Bramus.TextExport-1.3.jsx
のような感じで、フォルダごと入れました。
すると、ccメニューの 【ファイル】→【スクリプト】→【ps_bramustextexport-13】と選択できるようになりました。
レイヤー名と、実際のテキストデータを、テキストファイルにして抽出してくれます。
結構便利かも。
gulp(node)でjsonのデータを読み込む時、jsonファイルの修正が都度反映されない件
gulp(node)を使用時、jsonなどの外部ファイルにデータを持っておき、それを読み込んで処理をしたい時があると思います。
が、以下のように requireで読み込んだ場合、初期に読み込んだものがキャッシュされてしまいタスクを走らせた後に、jsonファイルを修正してもその変更が反映されません。なので、毎回タスクを起動、停止、起動みたいにしのいでました。
gulpfile.js その１
#pug gulp.task 'pug', ()-> gulp.src [ paths.root + '/**/*.pug' "!"+ paths.root + '/**/_*.pug' ] .pipe plumber() .pipe data (file)-> { 'conf':require './src/data/config.json', 'utf8' 'conf':require './src/data/data.json', 'utf8' } .pipe pug {pretty: true} .pipe gulp.dest(paths.dist) .pipe browser.reload({stream:true})
調べたら、同じことで悩んでいる人がいましたw
nodeにデフォルトでビルドインされている
「fs」モジュールを使用してfs.readFileSyncメソッドを使うようです！
gulpfile.js その2
fs = require 'fs' # これ必要 デフォルトの機能なので npm installは不要です #pug gulp.task 'pug', ()-> gulp.src [ paths.root + '/**/*.pug' "!"+ paths.root + '/**/_*.pug' ] .pipe plumber() .pipe data (file)-> { 'conf':JSON.parse(fs.readFileSync('./src/data/config.json', 'utf8')) 'data':JSON.parse(fs.readFileSync('./src/data/data.json', 'utf8')) } .pipe pug {pretty: true} .pipe gulp.dest(paths.dist) .pipe browser.reload({stream:true})
これで、リアルタイムに更新が反映されるようになりました！！
