Add style to child when AnimateKeyFrames run

[dpw1]

Hi! First of all, thanks for the awesome library. It works great!

My current issue is, I have the following component:

      <AnimateKeyframes
        play={true}
        duration={0.6}
        easeType="cubic-bezier(0.25, 0.46, 0.45, 0.94)"
        keyframes={[
          `transform: translateZ(700px) translateY(300px)`,
          `transform: translateZ(0) translateY(${this._translateY}px)`
        ]}
      >
        <figure className="Card " style={this._style}>
          <img src={this.props.src} alt={this.props.alt} />
        </figure>
      </AnimateKeyframes>

I would like the Card element to start with visibility:hidden;, and only when the AnimateKeyframes run turn it to visibility:visible;

How could I achieve this?

Thank you very much.

[bluebill1049]

hey @dpw1,

Thank you for your kind words ❤️

actually what about this?

https://codesandbox.io/s/lazyloadingsimplereactimg-zpcvg

[dpw1]

@bluebill1049 ,

Thank you for the code example. While it is indeed a good alternative it didn't suit my specific case as I'm re-rendering multiple cards at once and the previous shown cards were being hidden again.

However, I managed to fix it with a CSS-only solution.

I basically added a simple fade-in keyframe to my element, so it's hidden for a little while and then, when rendered, it's shown:

.Card {
  opacity: 0;
  animation: fadeIn 0.1s;
  animation-delay: 0.025s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

[bluebill1049]

aha good one by the way you can do percentage in keyAnimateFrames too

 <AnimateKeyframes
        play={true}
        duration={0.6}
        easeType="cubic-bezier(0.25, 0.46, 0.45, 0.94)"
        keyframes={[
          {20: `transform: translateZ(700px) translateY(300px)`},
          {80: `transform: translateZ(0) translateY(${this._translateY}px)`},
        ]}
      >
        <figure className="Card " style={this._style}>
          <img src={this.props.src} alt={this.props.alt} />
        </figure>
      </AnimateKeyframes>

in case you didn't know

[bluebill1049]

I just realize this may be what you are after

const [isPause, pause] = useState(true);

<AnimateKeyframes
       play
       pause={isPause}
       duration={0.6}
       easeType="cubic-bezier(0.25, 0.46, 0.45, 0.94)"
       keyframes={[
        {0: 'visbility: hidden'},
         {20: `transform: translateZ(700px) translateY(300px)`},
         {80: `transform: translateZ(0) translateY(${this._translateY}px)`},
       ]}
     >
       <figure className="Card " style={this._style}>
         <img src={this.props.src} alt={this.props.alt} />
       </figure>
</AnimateKeyframes>

so you use pause instead of play, you want to pause at visible hidden and toggle it pause to resume the animation. 😍