jjzjj

javascript - 如何在 FF 和 IOS 中使用 clip-path 多边形

coder 2024-07-21 原文

我尝试编写一个小插件，以更有机的方式打开模式框，因此我决定为 clip-path 属性设置动画。

现在这段代码只适用于 chrome: http://codepen.io/meodai/pen/GgGzYo?editors=011

看起来像firefox does not support polygon() 在 clip-path 属性中。 Safari 和 Mobile Safari 也在努力解决这个问题。

有没有一种类似的简单方法可以在 Firefox 和 Safari 以及 Mobile Safari 中进行这项工作？知道如何解决这个问题吗？

这是一个工作示例: 

var $ov = $('.overlay');

$(document).on('click touchstart', '.inner', function(){
  var coords, coordArray, coordsString;

  coords = this.getBoundingClientRect();

  coordArray = [
    Math.floor(parseInt(coords.left)) + 'px ' + Math.floor(parseInt(coords.top)) + 'px',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil(parseInt(coords.top)) + 'px',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil((parseInt(coords.top) + parseInt(coords.height) )) + 'px',
    Math.ceil(parseInt(coords.left)) + 'px ' + Math.floor((parseInt(coords.top) + parseInt(coords.height) )) + 'px'
  ];


  coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';

  $ov.css({
    '-webkit-clip-path': coordsString,
    'clip-path': coordsString
  });

  setTimeout(function(){
    $ov.addClass('show');
  },50);

  setTimeout(function(){
    coordsString = 'polygon(0% 0%,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },100);
  setTimeout(function(){
    coordsString = 'polygon(0% 0%,100% 0%,' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },180);
  setTimeout(function(){
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },260);

  setTimeout(function(){
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,0 100%)';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },340);

  // reverse
  setTimeout(function(){
    coordsString = 'polygon(0% 0%,100% 0%,100% 100%,' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },1500);

  setTimeout(function(){
    coordsString = 'polygon(0% 0%,100% 0%,' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },1580);
  setTimeout(function(){
    coordsString = 'polygon(0% 0%,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },1640);
  setTimeout(function(){
    coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
    $ov.css({
      '-webkit-clip-path': coordsString,
        'clip-path': coordsString
    });
  },1740);



   setTimeout(function(){
    $ov.removeClass('show');
  },2000);

});

body, html {
  background: silver;
}

.grid {
  float: left;
  width: 25%;
  height: 25vw;
  box-shizing: border-box;
  position: relative;
}

.inner {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  background: #ddd;
  -webkit-transition: background-color 111ms;
          transition: background-color 111ms;
}
.inner:hover {
  background: #fff;
}

.overlay {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  pointer-events: none;
  box-sizing: border-box;
  padding: 20px;
}

.overlay.show {
  opacity: 1;
  will-change: clip-path;
  -webkit-transition: clip-path 200ms;
          transition: clip-path 200ms;
  -webkit-transition: -webkit-clip-path 200ms;
          transition: -webkit-clip-path 200ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="grid">
  <div class="inner"></div>
</div>
<div class="overlay"></div>

最佳答案

您可能想看看 svgs，因为您可以为多边形的点设置动画并将其变形为所需的形状。

DEMO

DEMO With images and titles

此演示使用 snap.svg制作方 block 并在点击事件中操作它们的库。
目前未完成并且存在一些错误，但您应该明白了。

感谢 rlemon，我完全重构了代码帮助我做得更好。我在最新的 FF 和 Chrome 中对其进行了测试，一位用户报告说它可以在带有 safari 的 iPhone 上运行。

这些元素是用多边形制作的，点击时会添加一个正方形多边形，它的点一个一个地动画显示。

var items = [
  [ 1, 1,24, 1,24,24, 1,24],
  [26, 1,49, 1,49,24,26,24],
  [51, 1,74, 1,74,24,51,24],
  [76, 1,99, 1,99,24,76,24],
  [ 1, 26,24, 26,24,49, 1,49],
  [26, 26,49, 26,49,49,26,49],
  [51, 26,74, 26,74,49,51,49],
  [76, 26,99, 26,99,49,76,49],
  [ 1, 51,24, 51,24,74, 1,74],
  [26, 51,49, 51,49,74,26,74],
  [51, 51,74, 51,74,74,51,74],
  [76, 51,99, 51,99,74,76,74],
  [ 1, 76,24, 76,24,99, 1,99],
  [26, 76,49, 76,49,99,26,99],
  [51, 76,74, 76,74,99,51,99],
  [76, 76,99, 76,99,99,76,99]
],
    item = [],points= [],i, p=[],open = 0,
    s = Snap().attr({viewBox:"0 0 100 100","fill":"#585247"});

function runAnimations(el) {
  if( !animationSequences.length ) return;
  var sequence = animationSequences.shift();
  el.animate(sequence,120,mina.linear, runAnimations.bind(null,el));
}


function register(x,i) {
  item[i] = s.polygon(items[i]);  
  item[i].click(function () {
    var featured = s.polygon(items[i]).attr({"fill":"#585247"});
    p = items[i];
    animationSequences = [
      {"points": p[0]/2+","+p[1]/2+","+p[2]+","+p[3]+","+p[4]+","+p[5]+","+p[6]+","+p[7]},
      {"points": p[0]/3+","+p[1]/3+",100,0,100,100,"+p[6]+","+p[7]},
      {"points": p[0]/4+","+p[1]/4+",100,0,100,100,0,100"},
      {"points": "0,0,100,0,100,100,0,100"},
    ];
    runAnimations(featured);
    featured.animate({"fill":"#ACA696"},300);
    featured.click(function(){
      this.stop().animate({"points":p,"fill":"#585247"},200,mina.linear,featured.remove);
    });
  });
}
items.forEach(register);
*{margin:0;padding:0;}
body{background:#E3DFD2;}
svg{display:block;}
<script src="http://thisisa.simple-url.com/js/snapsvg.js"></script>

关于javascript - 如何在 FF 和 IOS 中使用 clip-path 多边形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28809897/

多边何在div34classjavascriptcsssvgclip-path

有关javascript - 如何在 FF 和 IOS 中使用 clip-path 多边形的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  7. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  8. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  9. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  10. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

随机推荐