How to change chord animation on close with angular2 and CSS
I have an accordion .. when opened it opens slowly but when closed it is very fast post within ms range. Please help me change the closing animation. I am here sharing my HTML and css code, Please help.
HTML code:
<accordion>
<accordion-group #groupUser class="outer admin">
<div accordion-heading >
ABCD
<i class="pull-right" [ngClass]="{'closeArrow': groupUser?.isOpen, 'openArrow': !groupUser?.isOpen}"></i>
</div>
<div layout="row" class="row listing-element tracking-listing">
<div layout="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Car</div>
</div>
</div>
<div layout="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Bike</div>
<div layout="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Auto</div>
</div>
</div>
</accordion-group>
</accordion>
CSS
#wd-faq .outer .panel-collapse .panel-body {
margin-top: 18px;
border: 0;
background-color: blue;
-webkit-animation:all 150ms;
overflow:hidden;
}
@keyframes all {
0% {
height:0px;
}
100% {
height:auto;
}
}
The CSS i pasted above opens the accordion. Help me close the accordion. Thanks in Advance.
source to share
Try this in yout html
HTML CODE
<accordion>
<accordion-group #groupUser class="outer admin">
<div accordion-heading >
ABCD
<i class="pull-right" [ngClass]="{'closeArrow': groupUser?.isOpen, 'openArrow': !groupUser?.isOpen}"></i>
</div>
<div class="slideInDown">
</div>
<accordion-heading>
<accordion>
and change your css with these codes
CSS
.slideInDown{
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
-webkit-animation-duration: 80ms;
animation-duration: 80ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
I don't know if it suits your requirements correctly or not, but you can try it once.
source to share
I think the main problem is with animation. This is not the best choice for toggle animation. If you check your animation, you will see that this is an open animation only. You can use two animations, or just one and do it backwards with css, but that will be a pain in the ass and also create terrible code. But you can use a transition which works great and it looks better and less code.
Here is the code:
CSS
At the beginning there is a .accordion class which is 0 and I have a 2s long transition. I am using max-height because auto will not work and it will be as high as the content when it is opened.
.accordion {
background-color: lightgreen;
max-height: 0;
overflow: hidden;
transition: max-height 2s;
}
.accordion.open {
max-height: 200px;
}
HTML:
In HTML, I have a click event on a button that opens a div. It has a switching function. On the accordion div, there is an ngClass with a public class and an isOpen buffer.
<button (click)="toggle()">OPEN</button>
<div class="accordion" [ngClass]="{'open': isOpen}">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
TypeScript code:
This is a simple code to check the status of an accordion.
isOpen:boolean = false;
public toggle() {
if(this.isOpen) {
this.isOpen = false;
}else {
this.isOpen = true;
}
}
And it's all. Hope you understand my english: D.
And here is the WORKING PLAN .
source to share