css - React Radium CSS Animation 在媒体查询后面不起作用

Question

  const ImageDivState0={
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 0%)',
    opacity:1,
  }
  const ImageDivState1={
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 10%)',
    opacity:1,
  }
  const ImageDivState2={
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 20%)',
    opacity:1,
  }
  const ImageDivState3={
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 30%)',
  opacity:1,
  }
  const ImageDivState4={
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 40%)',
  opacity:1,
  }
  const ImageDivState5= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 50%)',
    opacity:1,
  }
  const ImageDivState6= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 60%)',
    opacity:1,
  }
  const ImageDivState7= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 70%)',
    opacity:1,
  }
  const ImageDivState8= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 80%)',
    opacity:1,
  }
  const ImageDivState9= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 90%)',
    opacity:1,
  }
  const ImageDivState10= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 100%)',
    // transition:'1s',
    opacity:1,
  }
  const ImageDivState11={
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 0%)',
    opacity:1,
  }
  const ImageDivState12={
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 10%)',
    opacity:1,
  }
  const ImageDivState13={
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 20%)',
    opacity:1,
  }
  const ImageDivState14={
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 30%)',
  opacity:1,
  }
  const ImageDivState15={
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 40%)',
  opacity:1,
  }
  const ImageDivState16= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 50%)',
    opacity:1,
  }
  const ImageDivState17= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 60%)',
    opacity:1,
  }
  const ImageDivState18= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 70%)',
    opacity:1,
  }
  const ImageDivState19= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 80%)',
    opacity:1,
  }
  const ImageDivState20= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 90%)',
    opacity:1,
  }
  const ImageDivState21= {
    background:'-moz-radial-gradient(50% 50%, circle, transparent, #000 100%)',
    // transition:'1s',
    opacity:1,
  }


const ImageDivAnimation=
  Radium.keyframes({
  '0%':ImageDivState0,
  '10%':ImageDivState1,
  '20%':ImageDivState2,
  '30%':ImageDivState3,
  '40%':ImageDivState4,
  '50%':  ImageDivState5    ,
  '60%':ImageDivState6,
  '70%': ImageDivState7,
  '80%': ImageDivState8,
  '90%':ImageDivState9,
  '100%': ImageDivState10
  })
  var ImageDivAnimation1280px=
  Radium.keyframes({
  '0%':ImageDivState11,
  '10%':ImageDivState12,
  '20%':ImageDivState13,
  '30%':ImageDivState14,
  '40%':ImageDivState15,
  '50%':  ImageDivState16    ,
  '60%':ImageDivState17,
  '70%': ImageDivState18,
  '80%': ImageDivState19,
  '90%':ImageDivState20,
  '100%': ImageDivState21
  })
  const ImageDivStyleAnimation={
    
    
    width: 330 + 'px',
    height: 329+'px',
    backgroundColor: 'black',
    zIndex: 1,
    right: 280+'px',
        position: 'absolute',
    borderRadius: 100+'%',
    bottom: 27 +'px',
    animation: 'x 0.5s',
    animationName: [ImageDivAnimation],
    // opacity: 'x',
    
    // transition:'x',
    // transition: "5s",
    position: 'absolute',
    top: 50+'%',
    left: 50+'%',
    mozTransform: 'translateX(-50%) translateY(-50%)',
    webkitTransform: 'translateX(-50%) translateY(-50%)',
    transform: 'translateX(-50%) translateY(-50%)',

    '@media only screen and (min-width:1280px)':{
      width: 450+'px',
      height: 440+'px',
      backgroundColor: 'black',
      zIndex: 1,
      right: 280+'px',
          position: 'absolute',
      borderRadius: 100+'%',
      bottom: 27 +'px',
      animation: 'x 0.5s',
      animationName:  ImageDivAnimation1280px,
      
      // transition:'x',
      position: 'absolute',    
      top: 50+'%',
      left: 50+'%',
      mozTransform: 'translateX(-50%) translateY(-50%)',
      webkitTransform: 'translateX(-50%) translateY(-50%)',
      transform: 'translateX(-50%) translateY(-50%)',
      },

我在 React 中使用 Radium 编写了上面的 CSS 动画（对不起，代码很长，但我尝试将两个浏览器窗口大小的两个动画完全分开以使其工作），默认浏览器大小的默认实现工作完美，但是一个包含媒体查询（以 @media only screen 和 (min-width:1280px) 开头）的内容不会进入浏览器，如下面的屏幕截图所示，第一个默认屏幕尺寸（没有媒体查询）动画出现，但对于第二个屏幕尺寸，来自 Radium 样式对象的 x 变量不会被实际动画替换。知道为什么吗？

标签： cssreactjsmedia-queriesradium