###前提・実現したいこと
riot.jsを使っているのですが、hoge.comからhoge.com/fugaに遷移するときにヘッダ部分がCSS transitionでアニメーションするような仕様にしています(jQueryでクラスを付与)。一方で、hoge.com/fugaに直接アクセスしたときは最初からクラスが付与されてアニメーションが終了したのと同じ状態にしておきたいのです。
現状だと直接URLをたたいてもアニメーションが発生してしまうので、トップから遷移したときはアニメーション有り、直接アクセスしたときはアニメーションなしと処理を分岐できるようにしたいです
###該当のソースコード
JavaScript
1 <script> 2 riot.mount('header') 3 riot.mount('navigation') 4 5 route.base('/') 6 route('/', function() { 7 $('#header').removeClass('animation') 8 riot.mount('content', 'main') 9 }) 10 route('/fuga', function() { 11 $('#header').addClass('animation') 12 riot.mount('content', 'fuga') 13 }) 14 route.start(true) 15 </script>
fuga.tag
1<!-- header.tag --> 2 <header> 3 <div id="header"> 4 <!-- ヘッダの中身 --> 5 </div> 6 7 <style> 8 #header { 9 transition: all 1s; 10 } 11 .animation { 12 /* widthとかheightとかtransformとか */ 13 } 14 </style> 15 </header>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/21 04:57