Closed 1447bits closed 1 year ago
Hey i love the idea behind this animation.
Before adding it to the repository, here's some changes that would improve it.
Happy to help if you need
Thank you sir, but actually I am struggling with the collapse animation, and it would be helpful if you can help me with that
Kindly review these Updates Make it responsive ✔️ shrink card when button clicked twice✔️
Hey, I reviewed your code There are a few more point that i believe you can improve it.
First of all when adding an animation to a div you should use animation classes instead of ids for animations.
This will allow you to add multiple classes to an element.
An id
selector is unique in a page and can only apply to at most one element, while a class
selector can apply to multiple elements.
For your example
Instead of using class="card1"
you could use id="card1"
as card1 is unique.
Where as when adding animation with javascript :
//dont do this
document.querySelector(".card1").setAttribute("id", "faded")
//but do this instead
document.getElementById('card1').classlist.add('expand')
There are multiple ways to solve this problem here's the one i would.
expand
and shrink
in css
.expanded{
width: var(--expand-width);
height: var(--expand-height);
transition:all 0.3s ease-in-out;
}
.shrinked{
transform: scale(0.7);
opacity: 0.3;
overflow: hidden;
transition:all 0.3s ease-in-out;
}
Imagine these classes as a state of a card => (one card will have class expanded
when its open and the others will have the class shrinked
).
Notice that we are using transitions in css, they provide a way to control animation speed when changing CSS properties. css_transitions
data
attributes on buttons to stock the id of cards
<a onclick="click(this)" data-open="card1">...</a>
//...
<div id="card-1">...</div>
function click(button) {
//in this function you have to get the right card to open dataset.open
document.getElementById(button.dataset.open).classlist.add('expand');
//remove the expand class with classlist.remove from the others and add classlist.add('shrinked');
}
Try exploring these new ways of solving this problem. I think you will enjoy it.
As for the responsiveness and the other points they are validated.
Thank You for the suggestions it really helped,
Well done. I'm merging this version, if you're willing to continue working on improving the animation please do.
Here's some improvements that could be made.
When clicking an other button the current expanded shrinks and the other button expands at the same time.
It should be easy.
Also have a question on how your counter works. Why do you use it? let count = 0;
I am so glad to hear you liked my work,
logic behind counter is to indicate the state of card
initially count = 0 provide next Expand action count = 1 // indicates expanded card and count = -1 // indicates normal card
initially we can also set "count = -1" it will also work but starting with "zero" makes more sense because then value will oscillate between 0 and 1
Actually i was struggling with on and off conditions of a card and came up with counter approach problem was to indicate normal card and count = -1 was the way but then 0-1 approach worked now we can remove conditions for count = -1
Button operated expandable card operation added also changed some alignments from hover card animation for better visuals