Verwendung von Clip-Path-Polygonen in FF und IOS

Ich versuche, ein kleines Plugin zu schreiben, um Modal-Boxen auf eine organischere Weise zu öffnen, deshalb habe ich beschlossen, die Clip-Pfad-Eigenschaft zu animieren.Verwendung von Clip-Path-Polygonen in FF und IOS

Jetzt funktioniert dieser Code nur in Chrom: http://codepen.io/meodai/pen/GgGzYo?editors=011

Es ist wie firefox does not supportpolygon() in der Eigenschaft Klipppfad aussieht. Safari & Mobile Safari hat auch damit zu kämpfen.

Gibt es einen ähnlich einfachen Weg, um dies in Firefox und Safari und Mobile Safari auch funktionieren zu lassen? Irgendeine Idee, wie ich dieses Problem angehen könnte? Hier

ist ein funktionierendes Beispiel:

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>

Quelle

2015-03-02 meo

Sie könnten eine SVG für Firefox - http://caniuse.com/#search=clip-path –

@Paulie_D oh! Ich wusste nicht, dass du ein SVG als Clip-Pfad referenzieren kannst, ich werde mit diesem Dank herumspielen ... frage mich immer noch, ob es eine browserübergreifende Lösung/Hack für das gibt – meo

Hier ist ein netter kleiner Artikel [** https://css-tricks.com/clipping-masking-css/**](https://css-tricks.com/clipping-masking-css/) und diese [** Support Chart **] (http: //codepen.io/yoksel/full/fsdbu/) –

Sie können sich svgs ansehen, da Sie die Punkte eines Polygons animieren und zur gewünschten Form morphen können.

DEMO

DEMO With images and titles

Diese Demo nutzt die snap.svg Bibliothek die Quadrate zu machen und sie auf dem Click-Ereignis zu manipulieren.
~~Es ist derzeit nicht fertig und es gibt einige Bugs, aber Sie sollten die Idee~~ bekommen.

Ich habe den Code komplett überarbeitet, danke an rlemon für die Hilfe es besser zu bekommen. Ich habe es in der neuesten FF und Chrome getestet und ein Benutzer berichtete, dass es auf einem iPhone mit Safari funktioniert.

Die Elemente werden mit Polygonen erstellt, ein quadratisches Polygon wird beim Klicken hinzugefügt und die Punkte werden nacheinander animiert.

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>

Quelle

2015-03-25 18:02:53

danke für die Mühe! Ich werde das in verschiedenen Browsern versuchen. – meo

Erstaunliche Arbeit. +1 – vals

Ich habe mich nur gefragt, ob du würdest :-) – vals

Clip-Pfad unterstützt nur Zahlen für Punktwerte, es sieht aus wie Sie Prozent/Pixelskalen verwenden, die, warum es wird in firefox versagen.

Schalte auf ganzzahlige Werte:

coordsString = 'polygon(0 0,123 0,' + coordArray[2] + ',' + coordArray[3] + ')'; 
$ov.css({ 
    '-webkit-clip-path': coordsString, 
    'clip-path': coordsString 
});

Sie benötigen Pixel Referenzen aus dem coordArray zu entfernen und tatsächlichen int-Werte aus den Prozentsätzen zu berechnen.

Quelle

2015-03-25 15:55:25

oh gut zu wissen! Danke – meo

ich viele Möglichkeiten getestet haben, aber nach http://caniuse.com/#search=polygon Polygon nicht in FF unterstützen (!). Ich habe viele Möglichkeiten ausprobiert, aber jedes Mal sagen mir die FF-Dev-Tools, dass es kein korrekter Wert ist.

Mein getesteten Code (von Ihrem codepen):

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

$(document).on('click touchstart', '.inner', function(){ 
    var coords, coordArray, coordsString; 
    var windowWidth = window.innerWidth + ""; 
    coords = this.getBoundingClientRect(); 

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


    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 ,'+windowWidth+' 0,' + coordArray[2] + ',' + coordArray[3] + ')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 

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

     'clip-path': coordsString 
    }); 
    },260); 

    setTimeout(function(){ 
    coordsString = 'polygon(0 0,'+windowWidth+' 0,'+windowWidth+' '+windowWidth+',0 '+windowWidth+')'; 
    $ov.css({ 
     '-webkit-clip-path': coordsString, 

     'clip-path': coordsString 
    }); 
    },340); 

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

     'clip-path': coordsString 
    }); 
    },1500); 

    setTimeout(function(){ 
    coordsString = 'polygon(0 0,'+windowWidth+' 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); 

});

Quelle

2015-03-30 14:07:22

Verwendung von Clip-Path-Polygonen in FF und IOS

Antwort

Verwandte Themen