feat: Support animation style prop from IonContent

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

[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!