Exploring the dynamic world of Angular2 animations paired with the

In my layout, I have a row with three columns and two buttons to toggle the visibility of the side panels:

 col-md-3      col-md-7      col-md-2
------------------------------------
|         |                  |     |
|   left  |   middle panel   |     | <= right panel
|  panel  |                  |     |
|         |                  |     |
|         |                  |     |
------------------------------------
<<<                              >>>

When the left button is clicked, I want the middle panel to expand to fill the available space on the left:

            col-md-10       col-md-2
------------------------------------
|                            |     |
|      middle panel          |     | <= right panel
|                            |     |
|                            |     |
|                            |     |
------------------------------------
<<<                              >>>

The same behavior should occur when clicking the right button. If both buttons are clicked, the middle panel should expand to take up all available space.

I have achieved the desired effect by toggling classes on the div elements (e.g., changing from col-md-7 to col-md-12), but now I want to add animations for a smoother transition. I came across a solution using JQuery in this Stack Overflow thread: Animate bootstrap columns. However, I would prefer to avoid using JQuery and wonder if Angular2 animations could provide a solution instead.

csstwitter-bootstrapangularangular2-animation

Answer №1

To achieve the desired effect, you can utilize a combination of CSS styles and conditional rendering with *ngIf / [ngClass] on different panels:

CSS

.center-box {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

HTML

<div class="left-box col-md-3" *ngIf="(centerVisible == false)"></div>

<div class="center-box" [ngClass]="{ 'col-md-7' : (! centerVisible), 'col-md-10' : (centerVisible) }"></div>

<div class="right-box col-md-2"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the procedure for making the menu background color transparent?

I need help changing the background color to transparent on my menu in desktop view. ul.dropdown-menu li { background-color: transparent !important; } <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul id="menu" class="menu"> ...

htmlcsswordpress

Angular error message: The property 'results' is not found on the type 'ICandidate'

I am currently working with Angular-12 and have the following code snippet: Interface: export interface ICandidate { id: number; first_name: string; other_name: string; last_name : string; email: string; gender : string; user_photo: any; m ...

angular

Dynamic content displayed within adjacent div elements

I am currently working on a project where I am dynamically generating an outline by creating panels and labels in ASP.NET. Each node in the outline is defined by an outline number and outline text, which are obtained from a database that defines the relati ...

asp.netcsshtml

Stop image resizing on bootstrap Card

Looking for a Card design featuring a non-resized image against a grey background that is larger than the image itself. Although I have managed to set up the background and insert my chosen image, I am struggling to stop the image from resizing. <div c ...

cssreactjstwitter-bootstrapbootstrap-4

Angular router link circles back to its originator

I've been working on a basic login page that transitions to a homepage once the user successfully logs in. So far, I've focused solely on the HTML structure of the login component without implementing any code in the corresponding TypeScript file ...

htmlangularangular-router

Angular2: Exploring the Differences Between Observable.fromEvent and Button Click

As I work with my code, I have noticed that I am using both <button (click)="callsomefucntion" /> and Observable.fromEvent<MouseEvent>(button.nativeElement.'click') interchangeably. I am curious to understand the distinction between ...

angulartypescriptrxjs

Using column-count within a media query is not supported

I am encountering an issue with my CSS code that includes the column-count property within a media query, and for some unknown reason, it doesn't seem to be working! .masonry { -webkit-column-count: 3; -moz-column-count: 3; column-count: ...

htmlcss

Loop through an array of strings

When I receive the data as a string[] https://i.sstatic.net/ttyag.png However, when I attempt to loop over it subUrl(arr) { for(let i of arr) { console.log(i); } } No output is being logged. What could be causing this issue? ...

angulartypescript

Guidelines for securing login access where the "IsApproved" field must be true before authorization

During the account registration process, I initially set the default value to false for the field IsApproved. I need to create security rules that allow login only for users with IsApproved:true, and redirect those with IsApproved:false to the accessdenied ...

javascriptangulartypescriptgoogle-cloud-firestorefirebase-authentication

One limitation is that you cannot use JQuery to make multiple rows editable simultaneously

I have a unique challenge with implementing an edit button on each row of a dynamic Bootstrap table. I am attempting to toggle the button's icons and, depending on its current state, enable the corresponding row for editing. <td><button typ ...

javascriptjquerytwitter-bootstrapjquery-events

CSS files not loading on live-server

My HTML file is linked to a CSS file, but the CSS doesn't seem to load when I use live-server. Interestingly, the CSS works perfectly fine when I directly open the HTML file in a browser. The CSS file is located outside the directory where my HTML fi ...

htmlcssnpmpackage.jsonnpm-live-server

Utilizing req.session in an Express application with Angular (written in TypeScript) when deploying the backend and frontend separately on Heroku

I'm currently facing an issue where I am unable to access req.session from my Express app in Angular. Both the backend and frontend are deployed separately on Heroku. I have already configured CORS to handle HTTP requests from Angular to my Express ap ...

angulartypescriptexpress-session

Encountering difficulties in generating a personalized Angular Element

Currently, I am in the process of developing a custom Component that needs to be registered to a module. Here is how it is being done: app.module.ts import { createCustomElement } from "@angular/elements"; @NgModule({ declarations: [ExtensionCompone ...

angulartypescript

use ".otherwise" or /** with the latest version of Angular2 Router to redirect non-routes using wildcards

Can anyone provide guidance on using wild cards to route in the new Router when a non functional route is specified? Similar to the .otherwise method in Angular 1.X router or /** in previous beta router. Additionally, any example or Plunker code would be ...

javascriptangularangular2-routing

Angular - Best practices for exchanging feedback between sibling components

The title may not be the most descriptive, but I struggled to find a better way to convey my issue. I've encountered a problem multiple times while working with angular. To illustrate, let's consider this scenario: Imagine having a main compone ...

angulartypescriptdesign-patterns

Spring Boot - The Ultimate Guide to Hosting Angular2 Compiled Files

Currently, I am using a Spring Boot restful server alongside an Angular2 front-end application. In an attempt to streamline the process, I have been trying to host the front-end files on Tomcat in order to avoid serving them separately. Unfortunately, desp ...

springangularspring-boot

Why is the AngularJS 2 child @Component not being replaced in this scenario?

UPDATE: It seems that the issue lies in how I am structuring and serving the project rather than a coding problem. If I find a solution, I'll be sure to update this post. Thank you for your assistance. I'm currently developing an AngularJS 2 ap ...

angulartypescript

What is the process for accessing NGXS selectors during unit testing?

When subscribing to the selector teamMemberService$, we expect a list to be returned, followed by some checks. I need to write tests for this code snippet, but I am unsure how to approach testing this type of subscription. if (this.doctor != undefined) ...

angularunit-testingjestjs

Creating a Dynamic Navigation Bar using React and NextJS

How can we implement a Responsive Menu with React and NextJS? The magic happens when the user clicks a button, triggering the inclusion of the "open" class within the "menu" class. The rest is taken care of by the CSS styles. Illustrative code snippet: . ...

cssreactjsnext.js

CSS: Caption text below image remains on same line

I am struggling with positioning a div that contains an image and a caption. My goal is to make the caption break into a new line when it reaches 95% of the width of the image. Despite my efforts, I can't seem to achieve this. The text always pushes ...

htmlcss