You often need to allow users to switch between the various views of the application, whether it is switching from the list to the details view, or displaying the sidebar navigation. Setting up animations between these views can attract users and make your project more lively.
1. Use transform to switch between different views; avoid using left, top or any other attributes that will trigger the layout.
2. Ensure that all animations used are concise and lively, and set a short duration.
3. Consider how your animation and layout will change as the screen size increases.
Strive to keep all animations at 60fps. In this way, the user will not feel that the animation is stuck, which will not affect their experience. Make sure that the content of any animation element is set to will-change. For view transformations, you will most likely want to use will-change: transform.
For simplicity, we assume that there are two views: a list view and a detail view. When the user taps a list item in the list view, the detail view will slide into the screen and the list view will slide out.
To achieve this effect, you need a container to hold these two views and set overflow: hidden for the container. In this way, the two views can be arranged side by side in the container without displaying any horizontal scroll bar, and each view can be slid inside the container as needed.
<div class="container">
<div class="view list-view">
<ul class="list">
<li class="list-item">
列表
</li>
</ul>
</div>
<div class="view details-view">
<button class="back-button">返回</button>
<h1>详情页面</h1>
</div>
</div>
The CSS code for this container is:
container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
The position of the container is set to relative. This means that each view in it can be positioned absolutely in the upper left corner, and then moved by deformation. This method has better performance than using the left property (because this property triggers layout and drawing), and is usually easier to rationalize.
.view {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
will-change: transform;
}
The off-screen view should be shifted to the right, so in this case you need to move the detail view:
.details-view {
transform: translateX(100%);
}
Now, a small amount of JavaScript is needed to process the class name. This will switch the corresponding class name on the view.
var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');
function onViewChange(evt) {
container.classList.toggle('view-change');
}
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', onViewChange, false);
}
backButton.addEventListener('click', onViewChange);
Finally, we add CSS declarations for these class names.
.view-change .list-view {
transform: translateX(-100%);
}
.view-change .details-view {
transform: translateX(0);
}
The complete code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.view {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
will-change: transform;
transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.details-view {
transform: translateX(100%);
}
.view-change .list-view {
transform: translateX(-100%);
}
.view-change .details-view {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="container">
<div class="view list-view">
<ul class="list">
<li class="list-item">
列表
</li>
</ul>
</div>
<div class="view details-view">
<button class="back-button">返回</button>
<h1>详情页面</h1>
</div>
</div>
<script>
var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');
function onViewChange(evt) {
container.classList.toggle('view-change');
}
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', onViewChange, false);
}
backButton.addEventListener('click', onViewChange);
</script>
</body>
</html>