Как использовать полигоны клипов в FF и IOS

Я пытаюсь написать небольшой плагин, чтобы открыть модальные коробки более органичным способом, поэтому я решил анимировать свойство клипа.Как использовать полигоны клипов в FF и IOS

Сейчас этот код работает только в хроме: http://codepen.io/meodai/pen/GgGzYo?editors=011

Похоже firefox does not supportpolygon() в свойстве клип пути. 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>

источник

2015-03-02 meo

Вы можете использовать SVG для Firefox - http://caniuse.com/#search=clip-path –

@Paulie_D о! Я не знал, что вы можете ссылаться на SVG как на клип-путь, я буду играть с этим спасибо ... Все еще интересно, есть ли кросс-браузерное решение/взломать для этого – meo

Вот хорошая маленькая статья [** https://css-tricks.com/clipping-masking-css/**](https://css-tricks.com/clipping-masking-css/) и этот [** Таблица поддержки **] (http: //codepen.io/yoksel/full/fsdbu/) –

Возможно, вы захотите взглянуть на svgs, поскольку вы можете анимировать точки многоугольника и преобразовать его в нужную форму.

DEMO

DEMO With images and titles

Это демо использует snap.svg библиотеку, чтобы квадратики и манипулировать ими на событие щелчка.
~~В настоящее время не закончен и есть некоторые ошибки, но вы должны получить идею~~.

Я полностью отредактировал код, благодаря rlemon за то, что помог мне улучшить его. Я тестировал его в последних версиях FF и Chrome, и пользователь сообщил, что он работает на 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>

источник

2015-03-25 18:02:53

Благодарю вас за внимание! Я попробую это в разных браузерах. – meo

Удивительная работа. +1 – vals

Мне было просто интересно, если бы вы :-) – vals

Clip-путь поддерживает только цифры для значений точек, это выглядит, как вы используете процентные соотношения/пиксельные шкалы, поэтому его будет терпеть неудачу в firefox.

Изменения целочисленных значений:

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

Вам нужно будет удалить ссылки пиксельных из coordArray и расчета фактических значений INT от процентов.

источник

2015-03-25 15:55:25

О, хорошо знать! Спасибо – meo

Я испытал много возможностей, но в соответствии с http://caniuse.com/#search=polygon полигона не поддерживает в FF (!). Я пробовал много возможностей, но каждый раз, когда инструменты FF dev говорят мне, что это не правильное значение.

Мои испытания кода (от вашего 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); 

});

источник

2015-03-30 14:07:22

Как использовать полигоны клипов в FF и IOS

ответ

Смежные вопросы