2017.3.10
日記にコメント送信欄をつけてみたい#6
こんな記事数のかさ増しみたいな話を5回も続けてたのか自分･･････（汗）
ということで、今回から新しいことをやっていこうかと思います。アニメーションですね。
アニメーションに関しては自前で組み上げたことがないのですが、この機会にどういう風に実装できるか知っとかないとなと。絶対必要になる知識ですからね。
過度なアニメーションは基本的に嫌いなのですが、すごく短いアニメーションがあることで分かりやすくなる例っていくらかありますしね。
んじゃ、まずは調べていきましょー。
早速クサいの見つけましたね。アニメーション用の関数ってもっと色々あると思ったんですけど、これ一つで基本的になんでもできそうですね。直感的でわかりやすい関数だと思います。
実装方法を予測してみましょうか。まず、トップページのコメントフォームは座標を直接指定することで設定しているので、初期座標をテキトーに指定しちゃえばそっからアニメーションできそうですね。
問題なのは日記ログの方なのですが、これはDOMの都合上、マージンを作ることがほぼ不可能なので、代替案としてflexboxで作ってます。
まぁ･･････これに関してはheightを0から200までにアニメーションさせられれば良い感じですかね。
んじゃやってみましょ。
<script>
var anime_time = 100;
var comment_visible = false;
$(document).ready(function () {
$(".diary_comment_button").on('click', function () {
if(comment_visible){return true;}
if($('#diary_comment_toppage').length){
//トップページの場合
$('#diary_comment_toppage').css("top", $(window).height());
$("#diary_comment_toppage").show();
$('#diary_comment_toppage').animate({
top: $(window).height() - 200
}, anime_time );
$("body").css("margin-bottom","200px");
}else{
//日記ログの場合
$("#diary_comment_logs").css("height","0");
$("#diary_comment_logs").css("display","flex");
$('#diary_comment_logs').animate({
height: "200px"
}, anime_time );
}
$("#comment_close").css("top",$(window).height());
$("#comment_close").css("left",$(".diary_comment_class").offset().left + $(".diary_comment_class").outerWidth(true) - 35);
$("#comment_close").css("position","fixed");
$('#comment_close').animate({
top: $(window).height() - 200
}, anime_time );
comment_visible = true;
});
});
$(document).ready(function () {
$("#comment_close").on('click', function () {
if($('#diary_comment_toppage').length){
//トップページの場合
$('#diary_comment_toppage').animate({
top: $(window).height()
}, anime_time );
$('#comment_close').animate({
top: $(window).height()
}, anime_time , function(){
$("#diary_comment_toppage").css("display","none");
});
$("body").css("margin-bottom","0");
}else{
//日記ログの場合
$('#diary_comment_logs').animate({
height: 0
}, anime_time );
$('#comment_close').animate({
top: $(window).height()
}, anime_time , function(){
$("#diary_comment_logs").css("display","none");
});
}
comment_visible = false;
});
});
</script>
こんな感じに実装しました。ほんとはもーちょっと小奇麗なコードにしたいんですけど、まぁ、それぞれでDOM構造が違うのでしょうがないところあります。
クラス的に実装すればもーちょいいい感じになりそうですよね。せっかく学習したのに全く活かしてないですね。
いや、実際のとここれぐらいの簡単なやつならこれでいいっしょみたいなとこあったんですけど、うーんどうしましょうねえ。
ただfixedとflexで同じ動作ができるとは限らんし、というかこれ以上アニメーションに関して弄るつもりないからこれはこれでいいかねえ･･････。
肝としては、animate関数にコールバック関数をぶち込んでるところでしょうか。
閉じる時に、普通に手続き的に書いてしまうとアニメーションが終わる前にdisplay:noneが設定されるという致命的なバグが起こるので、しっかりアニメーションが終わってから非表示にする、というのをこのコールバック関数で実現しているわけですね。
具体的には44行目と54行目ですね。うーん、変数とか駆使すればどう考えてもクラスとして共通化できそうな気がするけど、やっぱ拡張しづらくなりそうだからやめておくべきなのかどうか迷いますね･･････。
あと、細かい変化ですけど、コメント書き込みボタンを連打しても何回も開かれるようなことがないようにもしました(笑)
ってことで、たぶん次回で最後です。もう技術的なことには触れないで、事後報告的に、デザインの話だけしてこの件に関しては終わらせようかなと思います。はい。