Animating elements outside of the current route when the route changes in Angular

Currently, I have two components with a smooth fade in/out animation that triggers when there is a route change. Alongside this, there is an external background image that gracefully fades in from a dark background upon page load, all managed through CSS.

app.component.html

<div class="bg"></div>
<div class="bgImage"></div>
<div class="main" [@fadeAnimation]="getDepth(myOutlet)">
  <router-outlet #myOutlet="outlet"></router-outlet>
</div>

app.component.ts

import { Component } from '@angular/core';
import { fadeAnimation } from './fade.animation';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
  ,  animations: [fadeAnimation]
})
export class AppComponent {
  title = 'app';

  getDepth(outlet){
    return outlet.activatedRouteData['depth'];
  }
}

My next goal is to implement a blur/unblur effect on the background image when there is a route change. Below is the animation service without the blur logic:

fade.animation.ts

import { trigger, animate, transition, style, query } from '@angular/animations';

export const fadeAnimation =
    trigger('fadeAnimation', [
        transition( '1 => 2', [
            query(':enter', 
                [
                    style({ opacity: 0 })
                ], 
                { optional: true }),
        // query('.bgImage', 
        //     [
        //         style({ filter: 'blur(0px)' }),
        //         animate('1s ease-in-out', style({ filter: 'blur(5px)' }))
        //     ], 
        //     { optional: true }
        // ),
            query(':leave', 
                [
                    style({ opacity: 1 }),
                    animate('0.25s ease-in-out', style({ opacity: 0 }))
                ], 
                { optional: true }),
            query(':enter', 
                [
                    style({ opacity: 0 }),
                    animate('0.25s ease-in-out', style({ opacity: 1 }))
                ], 
                { optional: true })
        ]),
        transition( '2 => 1', [
            query(':enter', 
                [
                    style({ opacity: 0 })
                ], 
                { optional: true }),
        // query('.bgImage', 
        //     [
        //         style({ filter: 'blur(5px)' }),
        //         animate('1s ease-in-out', style({ filter: 'blur(0px)' }))
        //     ], 
        //     { optional: true }
        // ),
            query(':leave', 
                [
                    style({ opacity: 1 }),
                    animate('0.25s ease-in-out', style({ opacity: 0 }))
                ], 
                { optional: true }),
            query(':enter', 
                [
                    style({ opacity: 0 }),
                    animate('0.25s ease-in-out', style({ opacity: 1 }))
                ], 
                { optional: true })
        ])
    ]);

Answer №1

Feeling a bit confused about the question.

Define a trigger called blur.

trigger('blur', [
      state('1', style({filter: 'blur(0px)'})),
      state('2', style({filter: 'blur(8px)'})),
      transition('1=>2', [ animate('1s')]),
      transition('2=>1', [ animate('1s')])
    ])

Here's how it looks in HTML:

<div class="bgImage" [@blur]="getDepth(myOutlet)" ></div>

Take a look at the implementation: https://stackblitz.com/edit/angular7-material-primeng-template-31yvug

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

Exploring Angular testing by using mock services to simulate the behavior of other services

I am familiar with how to mock a function call to a service. However, I am facing a scenario where my MainService acts as a wrapper for multiple other services. export class MainService { constructor( public service1: Service1, public service2 ...

SASS: Issues with the @media query functionality

My SASS file is giving me trouble with the media query. The background color changes properly, but the text remains unaffected. I would greatly appreciate your assistance with this issue. Below is the HTML and SASS code snippets in question: <!-- HTM ...

Choose a Range of DOM Elements

My challenge is to select a range of DOM elements, starting from element until element. This can be done in jQuery like this: (Source) $('#id').nextUntil('#id2').andSelf().add('#id2') I want to achieve the same using JavaScr ...

Angular File Upload Button Tutorial

English is not my first language, so please excuse any mistakes. I recently started learning Angular and I'm attempting to build a file upload button that lets users upload files based on dropdown menu options (such as USA States). Once uploaded, the ...

Issue with IE 11: Including card image inside anchor tags in Bootstrap 4 causes unwanted white space

I'm having an issue with my Bootstrap 4 card markup where the image is wrapped inside an anchor tag. The problem arises when viewing it in IE 11, as there is a large white space underneath the image, while everything displays fine in Chrome, Edge, and ...

Enlarge the image to fill the entire screen

Currently, I am working on a webpage where I am displaying data fetched from a database using Laravel framework. The code snippet is shown below: Here is how the webpage looks like - image1 What I aim to achieve is to make the div go fullscreen upon clic ...

Populating a div with letter-spacing

I'm facing a challenge in populating a div with text using letter-spacing. The issue at hand is that I am unsure of the width of the div. Initially, my thoughts leaned towards using text-align= justify, however, I found myself lost in the maze withou ...

Category-Specific Page Display

Can anyone help with CSS coding using Wordpress Elementor to make a page only display posts from the coaching category? I attempted to use this selector article.type-post:not(.category-coaching) { display: none; }, but it doesn't seem to be functi ...

Difficulty with selecting the nth-child element within an Ember application

In my current project using Ember, I am faced with the challenge of targeting nth-child elements with CSS due to the presence of Ember script tags. Is there a consistent method to achieve this in an Ember application? Instead of the conventional approach: ...

Tips for updating the left positioning of a Div element on the fly

Although my title may not fully explain my goal, I am dealing with dynamically created div elements. When a user triggers an ajax request to delete one of the divs, I want to remove it from the DOM upon success. The issue arises in adjusting the layout aft ...

Is it possible to exclusively target a child div using JavaScript in CSS, without affecting the parent div?

I'm in the process of developing a calendar feature where users can select a specific "day" element to access a dropdown menu for time selection. The functionality is working fine, but I've encountered an issue. When a user selects a time from th ...

The scrollbar is shifting the page's content towards the left

As a first-time user of Bootstrap, I have encountered an issue while building my website that I cannot seem to solve. Whenever I add large content that requires a scrollbar in the browser, the entire page shifts to the left. In simpler terms, when a scrol ...

Guide on utilizing mat-slide-toggle to assign either a value of 1 or 0

I am utilizing the mat-slide-toggle feature from Material in a similar manner to this example https://material.angular.io/components/slide-toggle/overview The problem I am encountering is similar to the issue outlined in this link: https://stackblitz.com ...

Why are my AngularJs elements not appearing in the print dialog window?

Whenever I try to open the print Dialogue on a specific page, all I'm seeing is a blank screen. The majority of the content on this page consists of AngularJS elements. To trigger the print dialogue, I use the following code: <a href=""onclick="wi ...

Is there a way to display a sub-menu while scrolling through a sub menu?

My dropdown menu is not displaying properly when there is a scroll bar on the page. I am using Bootstrap for my website. https://i.sstatic.net/tZFXh.png Below is the HTML code I am using: <a tabindex="-1" href="#">Location</a> ...

Is there a way to switch out the WordPress page title for an image instead?

I am trying to change up the appearance of my WordPress site by replacing the text on page titles with images. Working on a child theme locally, I need to customize each page individually as they will have different images. The current state is as follows ...

Extract information from a complex nested structure within an array

Can someone assist me with extracting only the username from the response provided below? I am able to access other data but struggling with this particular aspect. [ { "_id": "5f44d450aaa72313549d519f", "imageTitle": "u ...

The text within my div is spilling over the edges despite my attempts to use text align and overflow properties

body { font-family: Arial; font-size: 15px; } .container { position: relative; max-width: 1800px; height: auto; margin: 0 auto; text-align: center; width: 90%; } .container img { vertical-align: center; } .container .content { pos ...

Creating Dynamic Height for Div Based on Another Element's Height Using ReactJS and CSS

I'm attempting to set a fixed height for a div in order to enable overflow scrolling. However, I am encountering issues as I am using JavaScript within a useEffect hook to accomplish this task. The problem is inconsistent as sometimes the height is se ...

Tips for adding style to a group of SVG elements:

I currently have an array of .svg icons, each with unique properties that I need to customize: <svg width="24" height="24" viewBox="0 0 24 24"> ... </svg> import styled from 'styled-components'; import Github from 'assets/git ...