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

Want to ensure a span is perfectly centered both vertically and horizontally within a div using minimal CSS code?

I am currently working with LESS (CSS) and facing an issue with aligning a span element (which contains button text) inside a div container (button). The span is horizontally centered but vertically aligned to the top. I also want the span to automatically ...

css

Maintain the URL state while logging in using angular-oauth2-oidc

In our Angular application, we utilize angular-oauth2-oidc for authentication management with the Code Flow and PKCE. To enable automatic login for users upon app visit, we initialize our app as follows: this.oauthService.configure(authModuleObject); this. ...

angular

Navigating the store in Ionic Angular using Ngrx

Currently, I am in the process of developing an app using Ionic Angular Cordova. My issue lies in trying to display the state of my application, specifically all the objects within it. However, despite my efforts, the objects that I have added cannot be lo ...

angularionic-frameworkngrx

Is there a way to automatically recalculate the "Total Price" when the input values are adjusted?

Whenever I add an item to the cart, it gets appended to the row in the shopping cart, and the price adjusts accordingly. However, I'm having trouble getting the price to adjust whenever I change the input values (input type: "number"). I can't se ...

javascripthtmlcss

Having difficulty retrieving an angular file from a location outside of the asset folder

I'm encountering issues with a small project that is meant to read a log and present it in table format. Here is the outline of the project structure: project structure Within the LOG directory, I should be able to access motore.log from my DataServi ...

htmlcssangulartypescript

The value from select2 dropdown does not get populated in my article in Angular

I am attempting to link the selected value in a dropdown menu to an article, with a property that matches the type of the dropdown's data source. However, despite logging my article object, the property intended to hold the selected dropdown value app ...

javascriptangulartypescript

Ways to insert text inside a border

I'm struggling to figure out how to insert text within a border. Can someone guide me on how to accomplish this? Is there a way to place text in the center of a border? I have included a screenshot for reference. ...

htmlcss

Accessing a data property within an Angular2 route, no matter how deeply nested the route may be, by utilizing ActivatedRoute

Several routes have been defined in the following manner: export const AppRoutes: Routes = [ {path: '', component: HomeComponent, data: {titleKey: 'homeTitle'}}, {path: 'signup', component: SignupComponent, data: {titleKe ...

angulartypescriptangular2-routing

Angular 2 - Ensuring service executes only when boolean condition is met

I am currently dealing with a navigation menu that utilizes the ng2-page-scroll module. When scrolling through the page using hashtag links, I encountered an issue. If I navigate across routes, there is a delay in loading the data. As a result, the servic ...

angulartypescriptes6-promise

Loading Angular 4 Material Tabs when a tab is selected

Can lazy loading be implemented with Angular Material Tabs? If not, I am looking for a solution to execute a method when switching tabs. ...

angularangular-materialangular-material2

Adding style using CSS to a dynamically generated table row in Vue.js

Currently, I am working with a table that dynamically generates rows using v-for: <table> <tr><th class='name'>Name</th><th>Surname</th></tr> <tr v-for='data in datas'><td class=&a ...

javascriptjqueryhtmlcssvue.js

Switch the sidenav content dynamically in Angular 2 based on the current router state

Currently, I am in the process of developing a single page application using Angular 2. Within this project, I have implemented angular material mat-sidenav and mat-toolbar components. The toolbar includes a sidenav toggle button, as well as buttons that a ...

angularangular-materialangular-routing

angular use ngFor directive to restrict the number of rows displayed in a table

In my angular 6 project, I am trying to limit the display to just five rows in a table using ngFor. My current code snippet is as follows: <tbody> <tr *ngFor="let item of routines; let i = index"> <td style="display: none"> ...

htmlangularhtml-tableangular6

Why aren't NavBar Image Links Functional, even though the code seems flawless? What could be the issue?

Looking at the current HTML code snippet I have within the <head> section, it includes: <ul class="nav"> <li> <a href="http://www.greg-holmes.com/#/title" target="_blank"> <img src="img/home.png"> ...

htmlcssnavbar

Concealing the path of a file input in CSS

Similar Question: How to Conceal Input File Path in HTML File Upload Hello there! I was wondering if it's feasible to conceal the input file path and only display the browse button? Thanks a lot! Lucas ...

cssinput-type-file

What is the best way to update queryParams without activating subscribe functions?

Hello, I am currently in the process of developing an angular app with multiple routes. When navigating to a specific page, the queryParams trigger the subscribe function. While on the page, I need to be able to change the queryParams without triggering ...

angular

Full-screen modal fade not functioning properly

I am trying to implement multiple fullscreen modals on a single page, but I am facing an issue where they slide in and out at an angle instead of just fading in and out. I have been unable to achieve the desired effect of a simple fade transition. If you ...

javascripthtmlcssmodal-dialog

Export an array of objects using the Angular XLSX library

Here is my example data: exampleData: any[] = [ { "id": "123", "requestType": "Demo", "requestDate": "12/05/21", "status": "Success", "product": [ { "productName": "example product A", "productQty": "8" ...

angulartypescriptxlsx

A tutorial on creating dynamic text animations: sliding text effects on web pages

Does anyone know how to create a sliding in and out effect like the one on this page: ...

javascriptcssnext.js

accordions that are supposed to adapt to different screen sizes are

My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionali ...

javascriptjqueryhtmlcss