草庐IT

缩放动画

全部标签

javascript - CSS 动画六边形菜单

我正在尝试找出构建动画六边形菜单的最佳方法。请参阅下图以便更好地理解:六边形汉堡包按钮位于中心。单击后,它会显示汉堡包按钮周围的三Angular形。后者变成了一个十字架来扭转这个过程,把一切都隐藏起来。我的图片实际上在一开始就少了一步。第一张图片应该只显示汉堡按钮,就像codepen演示一样。所以我的问题如下:能否请您告诉我如何通过jQuery和其他工具从HTML到CSS构建这个六边形菜单动画。你会用什么技术来实现它。请记住,虽然codepen示例以简单图标为特色,但我的以三Angular形图片为特色,一旦悬停就会显示带副标题的标题。 最佳答案

javascript - 如何知道 D3.js 中的当前缩放级别

几天前我遇到了一个问题。我有一个图表,当我使用ZoomBehavior时它有效,但我需要知道何时达到最大缩放以加载新给定//Specifiesthezoomscale'sallowedrange,[min,max]d3.behavior.zoom().x(x).scaleExtent([1,10]).on("zoom",draw)查看我的代码http://jsfiddle.net/albanlopez/D4MRP/ 最佳答案 在绘图函数中,当前事件将具有缩放级别(如您提到的d3.event.scale)。另外,如果您保持以下行为:v

javascript - 在 React 中处理滚动动画

在React中处理滚动位置的正确方法是什么?由于更好的用户体验,我真的很喜欢流畅的滚动。由于在React中操作DOM是一种反模式,我遇到了问题:如何平滑地滚动到某个位置/元素?我通常更改元素的scrollTop值,但这是对DOM的操作,这是不允许的。JSBIN代码:importReactfrom'react';importReactDOMfrom'react-dom';classAppextendsReact.Component{handleClick=e=>{for(leti=1;i(this.node.scrollTop=i),i*2);}};render(){constsomeA

javascript - Highcharts 如何在设置数据处显示加载动画

我有highcharts图形。当我创建我的页面时,我显示空图形(我没有设置数据属性,只有图形标题,里面是空的。)我从服务器异步获取数据并调用setData()回调函数。但是用户看到一个空白页面,我想为他们显示一个加载图像。这个:http://api.highcharts.com/highcharts#loading对我不起作用。有什么想法吗? 最佳答案 我按照给定URL中的说明进行了操作:functionupdateGraphic(url,chartName){chartName.showLoading();$.getJSON(ur

JavaScript 动画

我正在尝试为div在JavaScript中水平移动200px设置动画。下面的代码让它跳跃像素,但是有没有办法让它看起来像动画而不使用jQuery?function(){vardiv=document.getElementById('challengeOneImageJavascript');div.style.left="200px";} 最佳答案 这是一个基本的动画设置:functionanimate(elem,style,unit,from,to,time){if(!elem)return;varstart=newDate().

javascript - Angular 2加载动画卡住

我开发了一个Angular2应用程序,它有相当大的尺寸并且需要一些时间来加载(vendor.js大约有5MB大)。为了让用户的时间更愉快,我更换了标准Loading...使用CSS动画(加载条)或GIF动画(我都试过了):Wait...或Wait...但这一切都不起作用,因为动画(CSS或GIF)在页面加载期间卡住,当它继续时,Angular应用程序已准备就绪并显示。所以结果是一个卡住的加载动画,然后app=情况并不比以前好......顺便说一句:在此加载期间,Javascript(例如setInterval)也不会执行。我尝试将vendor.js包含在async和defer中,但没有

javascript - CSS 加载动画在 NW.js (node-webkit) 中没有动画

Hereisajsfiddle我的CSS加载动画正常工作。但是,当我在我的node-webkit应用程序中使用相同的代码时,SVG路径和颜色是静态的并且不显示任何动画。经过一些研究,我尝试添加"chromium-args":"--enable-threaded-compositing"根据thisissue的解决方案到我的package.json文件.不幸的是,这并没有解决我的问题。根据thispost中第二个答案的建议,我正在为我的加载屏幕使用CSS动画。.我的动画是thisCodePen的略微改动版本.有没有人遇到过NW.js中的CSS动画的类似问题?此动画可能无法正常工作的任何原

javascript - 矩阵缩放/从点平移

我正在尝试缩放图像并使其从原点正确平移(基本上是捏合缩放)。我正在尝试找到一个不涉及更改transform-origin的解决方案,因为它会使查找图片的左/上边缘变得复杂,我使用它的不仅仅是这个问题.这更像是一道数学题。我无法想出一个方程式来确定根据原点平移多少图像。我计算出的当前方程式不能正确地从一个点开始缩放。关于演示,当使用鼠标滚动时,图像应该爆炸从鼠标指针开始。我不是在寻找解决方法或替代设计。如前所述,我无法修改transform-origin属性。演示:https://jsfiddle.net/dook/ort0efjd/矩阵变换函数functiontransform(){v

javascript - 我可以将关键帧动画的进度设置为特定阶段吗?

我有一个包含多个步骤的关键帧动画:@keyframesrotateLeftSideCustom{0%{}40%{-webkit-transform:rotateY(-15deg);transform:rotateY(-15deg);opacity:.8;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;}100%{-webkit-transform:scale(0.8)translateZ(-200px);transform:scale(0.8)translateZ(-200px)

javascript - 在 slidify 中为第二级元素符号点设置动画

我正在尝试获取io2012中的二级(低级)要点从父元素符号点单独设置动画,如下所示:>*Firstlevelanimatesbyitself>+Secondlevelthenanimatesbyitself>*Anotherfirstlevelanimatesbyitself我尝试了几种HTML变通方法,比如使用>*代替>+在尝试使用>*Secondlevelanimatedbyitself缩进元素符号时.然而,这只是缩进了文本而不是要点。我对...的实验同样失败。如果没有HTML解决方案,该解决方案是否涉及CSS或JavaScript? 最佳答案