Modal not working

[elblasto420]

Hello, Im developing an Angular 2 project, animations work fine with transitions and all, but I have a modal in one of my componentes, which is a full calendar and whenever you click on a date a modal pops up, however, now that I decided to use Animate.css the modal simply shows up with a dark background, and you cant scroll, click or even close it. The only workarround i found is deleting the reference
Any suggestions on how to fix this? I really wanna use animations
My code:

<div class="animated wobble">
<angular2-fullcalendar [options]=calendarOptions()>{{options | json}}</angular2-fullcalendar>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="calendar">
                <button id="botonAuxiliar" type="button" class="btn btn-default"  (click)= getHorarios(1) style="display: none;">Default</button>

                <button id="openModalButton" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" toogle="hide" style="display: none;">Crear Reserva</button>
                <div id="myModal" class="modal fade" role="dialog" [hidden]="!visible" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                    <div class="modal-dialog">
                        <div class="loginmodal-container">
                        

                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">CREAR NUEVA RESERVA {{fecha}}</h4>
                           
                            <div class="modal-body">
                                
                                <p>Descripcion</p>
                                <input [(ngModel)]="descripcion" type="text" id="descripcion" class="form-control input-sm chat-input" placeholder="descripcion" style="text-transform:uppercase;"/>
                                
                                <p>Fecha</p>
                                <input [(ngModel)]="fecha" type="text" id="descripcion" #dateControl="ngModel" class="form-control input-sm chat-input" placeholder="AAAA-DD-MM" dateISO/>
                                
                                <p>Aula</p>
                                <select [(ngModel)]="selectedValueA" name="something" class="form-control">
                                    <option *ngFor="let classroom of classrooms" [ngValue]="classroom">{{classroom.DESCRIPTION}}</option >
                                </select><br>

                                <button type="button" class="btn btn-info btn-block" (click)= getAllEmptyHours() >Obtener lista de horarios disponibles</button>

                                <p>Hora inicio</p>
                                <select [(ngModel)]="selectedValue" name="something" class="form-control">
                                    <option *ngFor="let hora of horas" [ngValue]="hora">{{hora.HORA_INICIO}}</option >
                                </select><br>

                                <p>Periodos para los cuales se desea reservar</p>
                                <select [(ngModel)]="selectedValueP" name="something" class="form-control">
                                    <option *ngFor="let periodo of periodos" [ngValue]="periodo">{{periodo}}</option >
                                </select><br>


                                <button *ngIf="collaboratorVisible" type="button" class="btn btn-info btn-block" (click)= getCollaborators() >Obtener lista de colaboradores</button>
                                
                                
                                <p>Materia</p>
                                <select [(ngModel)]="selectedValueM" name="something" class="form-control">
                                    <option *ngFor="let materia of materias" [ngValue]="materia">{{materia.MATERIA}}</option >
                                </select><br>
                                

                               <div class="material-switch pull-right">
                                    <input [(ngModel)]="collaboratorVisible" name="activo" type="checkbox" id="collaborator">Agregar colaborador(es)
                                    <label for="collaborator" class="label-primary"></label>
							    </div>

                                <button *ngIf="collaboratorVisible" type="button" class="btn btn-info btn-block" (click)= getCollaborators() >Obtener lista de colaboradores</button>

                                <p *ngIf="collaboratorVisible">Colaborador(es)</p>
                                <select *ngIf="collaboratorVisible" [(ngModel)]="selectedValueC1" name="something" class="form-control">
                                    <option *ngFor="let collaborator of collaborators" [ngValue]="collaborator">{{collaborator.COLLABORATOR}}</option >
                                </select><br>
                                <select *ngIf="collaboratorVisible" [(ngModel)]="selectedValueC2" name="something" class="form-control">
                                    <option *ngFor="let collaboratorTwo of collaborators" [ngValue]="collaboratorTwo">{{collaboratorTwo.COLLABORATOR}}</option >
                                </select><br>

                                

                                
                            </div>
                            
                                <div class="btn-toolbar">
                                <button *ngIf="!aceptarV" id="aceptarVisible" type="button" class="btn btn-success btn-block" (click)= nuevaReserva() data-dismiss="modal">Aceptar</button> 
                                <button *ngIf="modEventV" type="button" class="btn btn-info btn-block" (click)= setEvento() data-dismiss="modal">Modificar evento</button>
                                
                                <button *ngIf="!eliminarV" type="button" class="btn btn-danger btn-block" (click)= eliminarEvento() data-dismiss="modal">Eliminar evento</button>
                                <button type="button" class="btn btn-primary btn-block" (click)= cancelarReserva() data-dismiss="modal">Cancelar</button>
                                </div>
                           
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
</div>

[eltonmesquita]

It seems to be a z-index issue and not directly related to animate.css. Try to up the z-index and see if it solves the problem. If the problem persists, please create a reduced version on something like codepen and share it here.

[Guimaraesmvf]

Hi elblasto420,

I had this same issue. To fix it, please edit the the animate.css file and remove the line:
animation-fill-mode: both; on the .animated class

.animated {
animation-duration: 1s;
animation-fill-mode: both; <-- REMOVE THIS LINE
}

So far, I had no more problems doing that.

I hope this can help you too.

Kind regards,
Marcus Guimaraes

[eltonmesquita]

@Guimaraesmvf, you don't need to modify the library directly. Just modify the value of animation-fill-mode directly in the selector of the element. It'll make your code easier to maintain and update.

[eltonmesquita]

I'm closing this as it's stale. Feel free to open it again in case you need further help with the issue.

[suyalcinkaya]

Fixed as:

- animation-fill-mode: both;

+ animation-fill-mode: backwards;