In my card with a unique animation, clicking on the "Edit" button triggers the following actions:
- It smoothly transitions to the center of the screen.
- During this movement, it rotates by 180 degrees, revealing a blank green back content.
Once the card reaches the center of the div and completes its rotation, it expands to full screen before redirecting the user. However, I encountered an issue where only after the second animation finishes (while all animations are complete), the back content becomes visible. During the rotate and translate functions, only the front content is displayed flipped instead of showing the back content as intended. Refer to the JSFIDDLE link for further details. The HTML code snippet appears below:
<div class="cards-holder">
<div class="card bg-light mb-3 item" style="display: none">
<div class="front face">
<div class="card-header kid-card-header">
<div class="kid-card-header-name">
<label>Child name: </label>
<label>Kevin </label>
</div>
<div class="kid-card-header-delete-button">
<i class="fa fa-trash-o deleteChild" aria-hidden="true" style="cursor: pointer" idOfChild="23"></i>
</div>
</div>
<div class="card-body">
<div class="kid-card-content">
<div class="kid-card-content-image">
//some image
</div>
<div class="kid-card-content-description">
<p class="card-text">
<label>Age: </label>
<label>2 years</label>
</p>
<p class="card-text">
<label>Gender: </label>
<label>Male</label>
</p>
<p class="card-text">
<label>Height: </label>
<label>50 cm</label>
</p>
<p class="card-text">
<label>Weight: </label>
<label>25 kg</label>
</p>
</div>
</div>
</div>
<div class="card-footer kid-card-footer">
<button class="btn btn-secondary editChildButton" ChildId="23">Edit</button>
</div>
</div>
<div class="back face">
</div>
</div>
</div>
The CSS styling applied to achieve the desired effects can be viewed in the subsequent code block along with relevant JavaScript code snippets:
.card {
transform-style: preserve-3d;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
background-color: #78C2AD;
}
To address the issues faced during animation execution, certain functions were implemented within the provided JavaScript logic. One such function toggles the z-index based on current status while another facilitates smooth rotation along the Y-axis. Event handling is achieved upon clicking the "Edit" button to initiate the sequence of movements and transformations defined. Upon completion of these animations, redirection to a specified page occurs seamlessly. Refer to the attached JSFIDDLE link for a visual representation. Further enhancements showcase accurate card positioning for better understanding.