These are chat archives for japgolly/scalacss

3rd
May 2018
Victor Ivri
@vivri
May 03 2018 03:33

Hey guys! Quick question about introducing a keyframe animation. I've taken this approach to fading-in elements: https://stackoverflow.com/a/39669911 and adopted it to ScalaCSS:

 val fadeIn = style(
    opacity(1),
    animationName(
      keyframes(
        (0 %%)   -> keyframe(opacity(0)),
        (100 %%) -> keyframe(opacity(1))
      )
    ),
    animationDuration(1 second),
    animationIterationCount.count(1),
    animationTimingFunction.easeIn
  )

  val btn = fadeIn + style(
    addClassNames("btn-lg","btn","btn-outline-light","btn-block"),
    whiteSpace.normal
  )

val paragraph = fadeIn + style(
    addClassNames( "container-fluid","h4","text-light"),
  )

As you see, I'm trying to fade-in some elements. The elements also use Bootstrap 4. I'm not seeing any animations :( Any ideas why?

Victor Ivri
@vivri
May 03 2018 12:36
^ this is odd, since inserting the raw css works.
Otto Chrons
@ochrons
May 03 2018 13:44
does the generated CSS look ok?
Victor Ivri
@vivri
May 03 2018 17:37
@ochrons the generated css has no animations; I can try and debug this and/or submit a bug report later