Question

我正在尝试在我的网站上执行此操作：

http://codepen.io/anon/pen/dPzarw

<svg width="100" height="100">
   <g id="cross_svg">
    <rect id="Rectangle-1"  x="0" y="0" width="48" height="2" fill="transparent"></rect>
    <rect id="Rectangle-2"  x="0" y="14" width="48" height="2" fill="transparent"></rect>
    <rect id="Rectangle-4"  x="0" y="28" width="48" height="2" fill="transparent"></rect>
  </g>    
</svg>

CSS：

svg {
  width: 52px;
  height: 52px;
  z-index: 99999;
  transition: all .3s ease;
  display: block;
  margin: 15% auto;
  cursor: pointer;
}
svg g {
  transition: all .3s ease;
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: auto;
  cursor: pointer;
}
svg rect {
  transition: all .3s ease;
  fill: #E04681;
}
svg g {
  width: 100px;
  height: 100px;
}

使用Javascript：

$(document).ready(function(){

  var svg = $('svg');
  var lines = svg.find('rect');
  var line_first = $('svg rect:nth-child(1)')
  var line_second = $('svg rect:nth-child(2)')
  var line_third = $('svg rect:nth-child(3)')
  var i = true;

  svg.on('click', function(){
    if (i) {
      setTimeout(function(){
        $(this).find("g").addClass('gotcha')

        line_first.css({
          'transform':'rotate(45deg)',
          'left':'50%',
          'top':'50%',
          'width':'200px',
          // This line BELONGS to @dervondenbergen :D 
          // Enjoy your propriety my friend.
          'transform-origin': 'left bottom'
        })
        line_third.css({
          'transform':'rotate(-45deg) translate(-50%,-50%)',
          'left':'50%',
          'top':'50%'
        })
        line_second.css('opacity','0')
      },005)
    } else {
      setTimeout(function(){
        line_first.attr('style', '');
        line_third.attr('style', '');
        line_second.css('opacity','1')
      },005)
    }
    i=!i; 
  });
});

如果该链接不起作用，则此页面为SVG版本： http://lukyvj.github.io/menu-to-cross-icon/

这在chrome和safari中效果很好但是当我在firefox中尝试它时它被打破了。在Firefox中它可以工作，但它几乎就像它移动了线，所以它是一个没有左下腿的X.这也是firefox的移动版本。是否需要进行任何特殊编码才能在Firefox中使用它？

Firefox过渡问题

0 个答案: