¿Cómo puedo hacer, para que los componentes de la página, respeten los efectos que les doy? Ejemplo: Yo tengo una div, que contiene un botón, al cual si lo pulsas, se le ha asignado una función, que cambiará el valor de una variable, para que la información de ese div se despliegue debajo de él.
<div class="divListProyect">
<div class="proyectSpecifics">
<h1>{{video.name}}</h1>
</div>
<div class="proyectListButtonContainer">
<a class="btn" (click)="mostrarInfo(video._id)" >Ver más info.</a>
<a class="btn" (click)="guardarInfo()" >Ver menos info.</a>
<a [routerLink]="['/video-update', video._id]" class="btn">Editar</a>
<a (click)="onDeleteVideo(video._id)" class="btn" >Borrar</a>
<div *ngIf="confirmed == video._id" class="divDeleteBtns">
<span>¿Seguro que quieres borrar el registro?</span>
<a (click)="onDeleteConfirm(video._id)">Aceptar</a>
<a (click)="onDeleteCancel()">Cancelar</a>
</div>
</div>
</div>
y luego, el div que desplegaría sería éste:
<div class="proyectInfo" *ngIf="info == video._id">
<h1>{{video.name}}</h1>
<p><strong>Descripción: </strong>{{video.description}}</p>
<p><strong>Duración: </strong>{{video.duration}}</p>
<p><strong>Medios usados: </strong>{{video.tecnologies}}</p>
<p><strong>Autor: </strong>{{video.author}}</p>
<div *ngIf="video.file != null || video.iframe != null">
<video class="videoDetail" *ngIf="video.file && video.file != null" src="{{url + 'getVideoFile/' + video.file}}" controls>Tu navegador no implementa este elemento.</video>
<iframe class="iframeDetail" *ngIf="video.iframe && video.iframe != null" [src]="safeUrl(video.iframe)" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Pretendo hacer, que cuando el div se despliegue, lo haga con algún efecto del estilo a "toggle()"
de la librería JQuery, pero al parecer no me lo respeta.