組元素的過渡轉換屬性在火狐瀏覽器中不作業 -有解無憂

我正在嘗試轉換一個組的SVG元素的transform屬性。(我可以在圓圈上應用轉換，它將作業，但在一個真實的專案中，我有一個帶有路徑的組，所以我必須在組元素上應用轉換)。

它在Chrome瀏覽器中運行良好，但在Firefox或Safari瀏覽器中卻不作業。

我閱讀了所有我能找到的資料，并看到了這個解決方案：

-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;

但是，它對我不起作用。

完整的代碼示例這里也是。

<script>/span>
import { scaleTime, scaleLinear, extent, max, timeFormat,scaleBand} from 'd3'/span>;
import { fade, fly } from 'svelte/transition';
    
    let points = [] 。
    

    
    const height = 500;
    
  const xTicks = [1990,  1995, 2000, 2005, 2010, 2015］。]
    const yTicks = [0, 5, 10, 15, 20] 。
     
  const padding = { top: 20, right: 15, bottom: 20, left: 25 };
    
    $: years = points.map(d => d.year) 
    
    let selectedY = 'bornrate';
    
    $: xScale = scaleBand()
        .domain(year)
        .range([padding.left, 500 - padding.right])
      .padding（0.2）。

    $: yScale = scaleLinear()
        .domain([0, 20] )
        .range([500 - padding.bottom, padding.top] ）。) 

    $: innerWidth = 500 - (padding.left   padding.right) 。
    $: barWidth = innerWidth / xTicks.length;
    
$: points = points.map(d => ({ ...d, birthrateNew:  15 })
    
    
        function updateData（） {
                 點 = [
        { id: 1, 年: 1990, birthrate: 16.7 },
        { id: 2, 年: 1995, birthrate: 14.6 },
        { id: 3, 年: 2000, birthrate: 14.4 }, 
        { id: 4, 年: 2005, birthrate: 14 },
        { id: 5, 年: 2010, birthrate: 13 },
        { id: 6, 年: 2015, birthrate: 12.4 }  
    ]; 
    }
    
    function updateData2（）{
        selectedY = 'birthrateNew' 
    }
    
    $: calcData = points.map(d =>  {
  return {
    x: xScale（d.year）。
    y: yScale(d[selectedY])。
  };
});
    
</script>>
< svg width="500" height="500"> 
{#each calcData as d}
       <g in:fade="{{延遲：d. x*2}}" transform="translate({d.x}, {d.y})">
          <circle。
          cx={8}
          cy=23
          r= {3}
          stroke='#000'/span>
          fill='#fff'/span>
          stroke-width='2'/span>
          ></circle>>

      </g>/span>
    {/each}

</svg> 
<button on:click={updateData}>/span>
    點擊我
</button>點擊我。

<button on:click={updateData2}>/span>
    點擊我
</button>點擊我。

<style>
    
    g {
    -webkit-transition: -webkit-transform 1s linear;
    -moz-transition: -moz-transform 1s linear;
    -o-transition: -o-transform 1s linear;
    transition: transform 1s linear;

}

</style>

謝謝！

uj5u.com熱心網友回復：

在我看來，Firefox不允許過渡transform屬性。一個變通的辦法是把翻譯也添加到css中（你可以使用自定義css屬性把坐標傳遞給樣式）

<g in:fade="{{delay: d. x*2}}" style="-x: {d.x}px; --y: {d.y}px;">

而且

g {
  transform: translate(var（--x）, var（--y）)。
  transition: transform 1s linear;

注意，你需要為坐標傳遞一個單位，但從代碼來看，我認為px對于你的用例應該是可以的。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/319394.html

標籤：

上一篇：每個畫圈的亂數

下一篇：css關鍵幀從&到