Ionic-framework: feat: Support animation style prop from IonContent

[jdnichollsc]

Feature Request

Ionic version:


[x] 4.x

Describe the Feature Request
Please support animation for IonContent element.

Describe Preferred Solution
Include new prop to support animation style.

Describe Alternatives
Adding the value via TS, but it's not working. e.g:

const contentElement = (this.content['el'] as HTMLElement);
const innerScroll = contentElement.shadowRoot.querySelector('.inner-scroll') as HTMLElement;
innerScroll.style.animation = 'background 30s ease infinite';

Related Code

ion-content {
  --background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  --animation: background 30s ease infinite;
}

@keyframes background {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Thanks in advance!

[Isaac-cura]

this work for me, put this in your page component

@ViewChild(IonContent,{static:false}) set content(content){
    if(content){
      let shadow = content.el.shadowRoot;
      let animationStyle = new CSSStyleSheet();
      (<any>animationStyle).replace(`
      :host{
        --animation-duration: 0s;
          --animation-timing-function: ease;
          --animation-delay: 0s;
          --animation-iteration-count: 1;
          --animation-direction: normal;
          --animation-fill-mode: none;
          --animation-play-state: running;
          --animation-name: none;
      }
      .inner-scroll{
        animation-duration: var(--animation-duration);
          animation-timing-function: var(--animation-timing-function);
          animation-delay: var(--animation-delay);
          animation-iteration-count: var(--animation-iteration-count);
          animation-direction: var(--animation-direction);
          animation-fill-mode: var(--animation-fill-mode);
          animation-play-state: var(--animation-play-state);
          animation-name: var(--animation-name);
      }
      `);
      shadow.adoptedStyleSheets = shadow.adoptedStyleSheets.concat(animationStyle);
    }
  }

then in your page.sccs add this for example

ion-content{
  --animation-name:perro
}

and the same for the rest of properties that you need

[jdnichollsc]

OMG, very interesting! @Isaac-cura I want to avoid adding styles from code, to be able to override the styles of the components from the styles of that page, but thanks for your excellent example! <3

[liamdebeasi]

Thanks for the issue. I am going to close this as we are going to be rolling out a broader animation solution in the next major release of Ionic Framework that should account for this use case. Thanks!

[jdnichollsc]

Ohh interesting, thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.