我正在嘗試使用SVG遮罩和CSS創(chuàng)建一個(gè)過(guò)渡效果。我達(dá)到了過(guò)渡效果正常工作的程度，但是在幾次(通常是1次或2次，但似乎是隨機(jī)的)效果停止工作，過(guò)渡是瞬時(shí)的。我已經(jīng)檢查了我的代碼，并記錄檢查生成的SVG是否有問(wèn)題，但是它是正確的，并且與第一次效果按預(yù)期工作時(shí)沒(méi)有什么不同。

火狐和Chrome都有這種情況。

我創(chuàng)建了一個(gè)JSFiddle來(lái)重現(xiàn)這個(gè)錯(cuò)誤:https://jsfiddle.net/nrm4fwg0/1/

function lerp(start, end, t) {
  return start * (1 - t) + end * t;
}
const noise = (visible, wasVisible, durationSeconds = 1, seed = 44, liminal = 0.1) => {
  const startOp = lerp(liminal * 2, 1 + liminal * 2, wasVisible?1:0);
  const endOp = lerp(liminal * 2, 1 + liminal * 2, visible?1:0);

  const slope = -1 / (liminal * 2);
  const startIntercept = (startOp - liminal) * -slope;
  const endIntercept = (endOp - liminal) * -slope;


  return `
<svg xmlns="http://www.w3.org/2000/svg" viewport="0 0 100 100" width="100" height="100">
  <defs>
    <filter id="alpha-effect">
      <feFlood  x="0" y="0"
      width="100" height="100"/>
      <feGaussianBlur stdDeviation="3"/>
      <feComponentTransfer result="SMOOTH">
        <feFuncA type="table" tableValues="1 0.7 0.3 0"/>
      </feComponentTransfer>
      <feTurbulence seed="${seed}" result="NOISE" type="fractalNoise" baseFrequency="0.05" numOctaves="5"/>

      <feMerge>
        <feMergeNode in="NOISE"></feMergeNode>
        <feMergeNode in="SMOOTH"></feMergeNode>
    </feMerge>

      <feComponentTransfer>
        <feFuncA type="linear" slope="${slope}" intercept="${endIntercept}">
            <animate
            attributeName="intercept"
            from="${startIntercept}"
            to="${endIntercept}"
            dur="${durationSeconds}s" />
        </feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
  
  <rect x="0" y="0" width="100" height="100" 
        fill="blue" filter="url(#alpha-effect)"/>
</svg>
`;
};


let isCardVisible = true;
function toggleCard(){
    const card = document.querySelector('#card');
  const mask = noise(!isCardVisible, isCardVisible);
  isCardVisible = !isCardVisible;
 
  
  card.style['mask-image'] = `url(data:image/svg+xml;base64,${btoa(mask)})`;
  card.style['-webkit-mask-image'] = `url(data:image/svg+xml;base64,${btoa(mask)})`;
  card.style['mask-size'] = 'cover';
  card.style['-webkit-mask-size'] = 'cover';
  card.style['mask-repeat'] = 'no-repeat';  
}

document.querySelector('#button').addEventListener('click', toggleCard);

好吧，我想到了一個(gè)解決辦法，但是我不知道怎么解釋，所以如果有人知道為什么會(huì)這樣，我很想知道。

基本上，我只是讓過(guò)濾器的id每次都是隨機(jī)的:

const id = ` alpha-$ { math . random()} `；

然后用它代替我之前用的固定alpha效果。現(xiàn)在，這種效應(yīng)將繼續(xù)發(fā)揮作用