组元素的过渡转换属性在 Firefox 中不起作用

Question

我正在尝试转换组 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;

然而它对我不起作用。

还有完整的代码示例 here。

<script>
import { scaleTime, scaleLinear, extent, max, timeFormat,scaleBand} from 'd3';
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 = 'birthrate';
    
    $: xScale = scaleBand()
        .domain(years)
        .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() {
                 points = [
        { id: 1, year: 1990, birthrate: 16.7 },
        { id: 2, year: 1995, birthrate: 14.6 },
        { id: 3, year: 2000, birthrate: 14.4 }, 
        { id: 4, year: 2005, birthrate: 14 },
        { id: 5, year: 2010, birthrate: 13 },
        { id: 6, year: 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="{{delay: d.x*2}}" transform="translate({d.x}, {d.y})">
          <circle
          cx={8}
          cy=23
          r= {3}
          stroke='#000'
          fill= '#fff'
          stroke-width='2'
          ></circle>

      </g>
    {/each}

</svg>
<button on:click={updateData}>
    click me
</button>

<button on:click={updateData2}>
    click me
</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>

谢谢！

Answer 1

在我看来，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 应该适合您的用例。

组元素的过渡转换属性在 Firefox 中不起作用

transitioning transform attribute of a group element not working in firefox

css

animation

svg

d3.js

svelte