Add: 页面动画效果 fade-in-down

This commit is contained in:
XPoet 2020-03-20 17:43:45 +08:00
parent 30a881eb4f
commit d9ee2d6d41
3 changed files with 4 additions and 7 deletions

View File

@ -1,6 +1,6 @@
<!-- 通用页面模板 --> <!-- 通用页面模板 -->
<div class="page-container"> <div class="page-container">
<div class="page-left"> <div class="page-left animated">
<%- partial('left-side') %> <%- partial('left-side') %>
</div> </div>
<div class="page-right"> <div class="page-right">

View File

@ -1,8 +1,8 @@
<div class="right-side-container"> <div class="right-side-container">
<div class="nav-container"> <div class="nav-container animated">
<%- partial('common/nav') %> <%- partial('common/nav') %>
</div> </div>
<div class="article-post-container"> <div class="article-post-container animated">
<% if (is_home()) { %> <% if (is_home()) { %>
<!-- 载入首页的内容 --> <!-- 载入首页的内容 -->
<%- partial('common/home-post') %> <%- partial('common/home-post') %>

View File

@ -1,6 +1,7 @@
.animated { .animated {
animation-fill-mode: both; animation-fill-mode: both;
animation-duration: 1s; animation-duration: 1s;
animation-name fade-in-down
} }
.animated.hinge { .animated.hinge {
@ -18,7 +19,3 @@
transform: translateY(0); transform: translateY(0);
} }
} }
.fade-in-down {
animation-name: fade-in-down;
}