正文 

当前位置： 首页 > 知识 >

带有 CSS 过渡动画的 D3

     2023-03-03     55

关键词：

【中文标题】带有 CSS 过渡动画的 D3【英文标题】：D3 with CSS Transition Animation 【发布时间】：2015-07-14 07:55:13 【问题描述】：

我正在使用 D3 创建气泡图。当我将鼠标悬停在每个气泡上时，会出现有关该气泡的一些信息，并且气泡的颜色会发生变化，现在可以正常工作。我接下来要做的是让颜色变化更加细致入微。我试图用 CSS 创建动画但无济于事

这是我在 visual.coffee 中的 JavaScript 代码：

  mouseover = (d) ->
    node.classed("bubble-hover", (p) -> groupValue(p) == groupValue(d))
    d3.select("#group-info").html(d.group)

  mouseout = (d) ->
    node.classed("bubble-hover", false)

这是我的 style.css：

.bubble 
    fill: black;


.bubble-hover 
    fill: red;

如果我们按照正常的 CSS 动画路线，我会写一个动画，像这样：

@keyframes gradual 
    0%  fill: black; 
    100%  fill: red; 


.bubble 
    fill: black;


.bubble-hover 
  animation: gradual 2s 1;

但这似乎不起作用。所以我想我应该使用 D3 的transition()。不幸的是，我的 CoffeeScript 技能并不扎实，所以我希望能得到一些帮助来实现这一点。谢谢！

【问题讨论】：

您是否考虑了您的供应商前缀？ @-webkit-keyframes 还是@-moz-keyframes 等？ @arjabbar 啊，我明白了。我忘记了那些。让我添加它们并再试一次。我会告诉你。谢谢。 嗨@arjabbar！你说的对。这正是问题所在。感谢您的帮助！ 【参考方案1】：

正如@arjabbar 所指出的，我忘记了供应商前缀。所以基本上我需要做的就是定义

@-webkit-keyframes gradual 
    0%  fill: black; 
    100%  fill: red; 


@-moz-keyframes gradual 
    0%  fill: black; 
    100%  fill: red; 


@keyframes gradual 
    0%  fill: black; 
    100%  fill: red; 


.bubble 
    fill: black;


.bubble-hover 
  -webkit-animation: gradual 2s 1;  /* Chrome, Safari, Opera */
  -webkit-animation-timing-function: ease-in;  /* Chrome, Safari, Opera */
  -moz-animation: gradual 2s 1;  /* Chrome, Safari, Opera */
  -moz-animation-timing-function: ease-in;  /* Chrome, Safari, Opera */
  animation-timing-function: ease-in;
  animation: gradual 2s 1;
  fill: red;

这是我的问题的 CSS 解决方案，很好。如果有人想用 d3 和 CoffeeScript 解决它，我很乐意学习并选择它作为正确答案。

【讨论】：

带有 css3 过渡的角度淡入淡出动画

】带有css3过渡的角度淡入淡出动画【英文标题】：angularfadeanimationwithcss3transtions【发布时间】：2015-01-1714:58:33【问题描述】：我正在尝试使用ngAnimate和css3转换在单击链接时淡入/淡出div。我有以下内容，但它不起作用。div显示/隐... 查看详情

CSS 过渡与 CSS 动画

...描述】：CSS过渡和CSS动画之间的技术区别在哪里？动画（带有关键帧）是否由多个过渡组成？关键帧是否支持唯一的区别？它们都是硬件加速的吗？【问题讨论】：相关帖子-CSS:Animationvs.Transition【参考方案1】：它们都是硬件加... 查看详情

css32d3d过渡

<!DOCTYPEHTML><html><head><metacharset="utf-8"><title>css3动画</title></head><style>.xuanzhuan{width:100px;height:80px;background:red;transform:rotate(10d 查看详情

带有背景渐变的 CSS 过渡

】带有背景渐变的CSS过渡【英文标题】：CSStransitionwithbackgroundgradient【发布时间】：2011-12-0911:36:47【问题描述】：我正在学习使用CSS3进行动画/过渡，但在这段代码中，过渡不起作用...为什么？HTML：<divid="test"></div>CSS：#t... 查看详情

d3.js动画过渡效果(v3版本)(代码片段)

一、过渡的启动 启动过渡效果，与以下四个方法相关: d3.transition([selection],[name])//创建一个过渡对象。但是由于每个选择集中都有transition()方法，可用d3.select("rect").transition()的方式来创建过渡，因此一般不直接用d3.transitio... 查看详情

带有 CSS 过渡的 SVG 过滤器

】带有CSS过渡的SVG过滤器【英文标题】：SVGfilterwithCSStransitions【发布时间】：2017-12-2203:23:01【问题描述】：我正在使用css动画进行svg过滤。我用<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><defs><filterid="goo"><feGaussianBluri... 查看详情

使用 CSS 过渡隐藏/显示带有 add/removeClass 的元素

】使用CSS过渡隐藏/显示带有add/removeClass的元素【英文标题】：hide/showelementwithadd/removeClasswithCSStransition【发布时间】：2015-05-2315:09:04【问题描述】：我想用CSS过渡隐藏/显示带有addClass和removeClass函数动画的元素。我尝试过这种方... 查看详情

带有 :before 和 :after 伪元素的 CSS 过渡

】带有:before和:after伪元素的CSS过渡【英文标题】：CSSTransitionswith:beforeand:afterpseudoelements【发布时间】：2012-04-0513:57:39【问题描述】：似乎无法使用-webkit-transition为伪元素设置动画。下面的小提琴显示了我在Chrome/Safari中运行时的... 查看详情

带有动画的不同图像之间的 UIImageView 过渡

】带有动画的不同图像之间的UIImageView过渡【英文标题】：UIImageViewtransitionbetweendifferentimageswithanimation【发布时间】：2017-06-0109:31:53【问题描述】：我有这段代码在同一张图片中重复淡入到视图控制器中overridefuncviewDidAppear(_animated... 查看详情

css过渡与动画

参考技术A过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果，比如:hover、:active或者通过js改变状态。动画包含两部分，描述动画的样式规则和指定动画开始、结束和中间过程样式的关键帧。关于动画事件，点... 查看详情

css3过渡动画&关键帧动画

一、过渡动画过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。Note：不是所有属性都能过渡，只有属性具有一个中间点值才... 查看详情

css动画之过渡模块

...有的选择器(只有在悬停时，执行选择器的属性)CSS3中新增过渡模块：transitionproperty（属性）duration（过渡效果花费的时间）timing-function（过渡效果的时间曲线）delay（过渡效果何时开始）简写：transition：过渡属性过渡时长过渡速... 查看详情

触摸移动触发时css过渡不一致

...：当用户滚动到某个点以下时，我正在触发css位置更改（带有css过渡动画）。这在pc上的chrome/safari上运行良好，但在iphone上不一致。它有时会跳跃而不是动画，有时它什么也不做，偶尔会动画。我尝试过使用jQueryan 查看详情

css3 过渡延迟，如果动画 svg 填充和颜色同时 chrome 中的错误在 FF 中起作用

...nFF【发布时间】：2016-07-1022:26:03【问题描述】：我有一个带有内联svg和文本的链接。我想在:hover上制作动画（或添加一个.active类），但在Chrome上，过渡不会同时 查看详情

vue深度学习-过渡效果

...。　　以 v-transition="my-transition 这个指令为例，当带有这 查看详情

css3的过渡和动画

过渡和动画都是CSS3的重要部分，今天有时间，了解些相关内容并记录下。在开始之前，首先看看CSS3的转化。转化CSS3的转化分为以下几种：translate移动rotate　旋转scale　缩放skew　倾斜matrix　混合每种转化都还有对应的3d版本注意... 查看详情

css3的过渡和动画

过渡和动画都是CSS3的重要部分，今天有时间，了解些相关内容并记录下。在开始之前，首先看看CSS3的转化。转化CSS3的转化分为以下几种：translate移动rotate　旋转scale　缩放skew　倾斜matrix　混合每种转化都还有对应的3d版本注意... 查看详情

使用步骤对 png 序列进行 CSS 过渡

...渡效果，并在悬停状态结束时返回动画。为此，我使用了带有“steps”计时功能的css过渡，如下所示：transition:background.5ssteps(9,end);查看fiddle以获得一个 查看详情