[JavaScript] 轉頁 fadeIn/fadeOut 效果
前言
此方式需使用 turbolinks 的方法
新增效果 css
這邊使用animate.css動畫效果， 下載 animate.css 放至 assets/stylesheet，確保他有被application.scss載入
加入轉頁 javascript
新增一檔案，放至 assets/javascripts，確保他有被 application.js 載入
// [path] turbolinks_transitions.js
document.addEventListener('page:change', function() {
document.getElementById('primary-content').className += 'animated fadeIn';
});
document.addEventListener('page:fetch', function() {
document.getElementById('primary-content').className += 'animated fadeOut';
});
- 注：fadeIn及fadeOut動畫可以再自行調整喜歡的樣式(參考animate.css樣式)
標示 object
在要轉頁動畫的地方給他標註 id = "primary-content"
如：
<body>
<%= render 'common/navbar' %>
<div id="primary-content">
<div class="container">
<%= yield %>
</div>
<%= render 'common/footer' %>
</div>
</body>
留言