jjzjj

Transition

全部标签

javascript - 在没有动画的情况下将进度条重置为零(在 Bootstrap 中)

我有多个操作要执行,我正在使用Bootstrap进度条来显示每个操作的进度。每个Action完成后,使用下面的代码行将进度条设置为零$('.progress').attr('样式',"宽度:0%")但是,这个动画是相反的,对于用户来说,应用程序似乎正在撤消之前执行的操作。如何在没有反向动画效果的情况下立即重置进度条? 最佳答案 您可以删除进度条的转换,如thisanswer中所述.notransition{-webkit-transition:none!important;-moz-transition:none!important

javascript - Material UI 在单击单个按钮时进出过渡

在MaterialUI中Transitionsdoc,有一些按钮触发转换的例子。我有一个按钮触发状态更改的情况,我希望以前的数据过渡出去,然后新数据过渡进来。我发现这样做的唯一方法是使用setTimeout。有没有更好的办法?InCodeSandboximportReactfrom"react";importSlidefrom"@material-ui/core/Slide";importButtonfrom"@material-ui/core/Button";importTypographyfrom"@material-ui/core/Typography";constwords=[

javascript - 暂停和恢复过渡

我正在使用setInterval,因此转换会在特定时间间隔后发生。是否可以使用setInterval暂停和恢复工作?任何正确方向的建议/指示都会非常有帮助。 最佳答案 这个问题是在D3v3是可用的最新版本时发布的。5年后D3v5有了一些新方法,比如selection.interrupt(),transition.on("interrupt"...)和localvariables,这可以使任务更简单、更轻松。那么,让我们假设一个简单的cx圆上的过渡:constsvg=d3.select("svg");constcircle=svg.a

javascript - 在组件中加载初始数据时,如何在 react-transition-group 中暂停动画?

我有以下App组件:()}/>它工作正常,但每个动画都会立即执行。例如,如果我从/rules转到/history,我在两个组件上都有完整的动画,但是历史组件需要来自服务器的数据,所以动画应用在空容器上.如何在react-transition-group组件中暂停动画?我有Redux,所以我可以在我的应用程序的任何地方更改loading变量。此外,我不想在应用启动时预加载商店中的所有数据。 最佳答案 我会让你的组件在加载时返回null并让加载状态确定CSSTransition键,如请看这里的例子:https://stackblitz.

JavaScript 函数参数 : positional -> map transition

我正在寻找一个vanillaJavaScript解决方案。假设我有一个带有以下header的函数:generateEmail(firstName,lastname,provider)我需要像这样运行它:generateEmail("John","Smith","gmail.com");我希望能够使用参数映射而不是位置参数来调用它,即generateEmail({"firstName":"John","lastname":"Smith","provider":"gmail.com"});我正在寻找一个已经编写好的解决方案来用JavaScript执行此操作,因为我有无限数量的函数要处理,例

javascript - 如何使用 onEnter Hook 和 $transition$ 防止默认操作? (新的用户界面路由器)

我正在使用ui-router1.0.0-alpha.5.旧事件是deprecatedthere.所以我正在尝试转换$rootScope.$on('$stateChangeStart',($event)=>{//somelogic$event.preventDefault();});进入:$transitions.onEnter({},($transition$)=>{//...});我怎样才能从这里防止默认操作? 最佳答案 看来我找到了答案:$transitions.onEnter({},($transition$)=>{retur

javascript - Ember.js:如何通过异步确认来防止脏模型上的转换?

我有一个很常见的情况:有一个脏模型,如果用户尝试转换到任何其他路线,我想显示确认信息。我有这样的东西可以与window.confirm确认对话框一起使用:varEventRoute=Ember.Route.extend({actions:{willTransition:function(transition){varevent=this.modelFor(this.routeName);if(event.get('isDirty')&&!confirm("Areyousure?")){transition.abort();}else{event.rollback();returntru

javascript - 为什么 Angular 5 Transition 抛出 AppComponent.html :2 ERROR TypeError: Cannot read property 'forEach' of undefined

为什么Angular5会抛出这个错误?AppComponent.html:2ERRORTypeError:Cannotreadproperty'forEach'ofundefined我正在研究Angular动画的概念验证,我直接使用网站上的代码。我的组件如下所示:import{Component,OnInit}from'@angular/core';import{trigger,state,style,transition,animate,keyframes}from'@angular/animations';@Component({selector:'app-obj-list',te

javascript - 如何让文本在悬停时慢慢改变颜色?

我想让我的文字像这样慢慢改变颜色:http://trentwalton.com/2011/05/10/fit-to-scale/有什么想法吗? 最佳答案 WorkingFIDDLEDemo您可以使用CSSTransitions来完成:a{color:lime;-webkit-transition:color1s;-moz-transition:color1s;-ms-transition:color1s;-o-transition:color1s;transition:color1s;}a:hover{color:red;}

javascript - 可以淡出 div 边框吗?

我知道你可以淡出使用jQuery,但我想知道是否可以淡出的边框?所以我有我的:我只想知道如何让边框在5秒后淡出。更新任何仍想这样做的人都可以使用CSS3过渡来做到这一点。请务必检查它是否在您支持的浏览器功能范围内:http://caniuse.com/#search=transition例子div{border:4pxsolidred;-webkit-transition:border-color.25sease;-moz-transition:border-color.25sease;-ms-transition:border-color.25sease;-o-transition: