首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么按钮过渡动画不能重置到正常位置?

按钮过渡动画不能重置到正常位置的原因是因为过渡动画是基于CSS的transition属性实现的,该属性只在元素的状态发生改变时才会触发动画效果。一旦按钮的状态发生改变,比如被点击后改变了位置或样式,过渡动画就会开始执行,但是没有提供直接的方法来重置过渡动画到初始状态。

要解决这个问题,可以通过以下几种方式:

  1. 使用JavaScript:可以通过添加事件监听器来捕获按钮的点击事件,并在点击事件触发时,通过修改按钮的样式或位置来实现重置动画效果。
  2. 使用CSS动画:相比过渡动画,CSS动画提供了更多的控制选项,包括动画的播放状态、持续时间、延迟等。可以通过定义一个CSS动画,将按钮的初始状态作为动画的起始状态,然后在需要重置动画时,通过添加或移除CSS类来触发动画效果。
  3. 使用动画库或框架:有许多第三方的动画库或框架可以简化动画的实现过程,并提供更多的控制选项和效果。可以根据具体需求选择合适的动画库或框架,比如Animate.css、GreenSock等。

总结起来,按钮过渡动画不能直接重置到正常位置是因为过渡动画是基于元素状态的改变触发的,而没有提供直接的方法来重置动画。可以通过使用JavaScript、CSS动画或第三方动画库来实现重置动画的效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

属性动画为什么不能移植 Jetpack Compose?

Android 的属性动画,是很好用的:又强大,又简单。然而在 Jetpack Compose 里,属性动画这一套东西却没有移植过去。 为什么?...真正的原因 那……为什么要换一种写法,而不继续沿用属性动画呢?就是我刚才说的:属性动画是「拿到 View 对象,操作对象的属性」,而 Compose 里已经没有可以拿到的界面元素的对象了。...那又为什么啊?为什么不让我们拿到?——这又要回到那个词了:「声明式」。Compose 的界面是声明式的,它的核心理念就是让开发者去描述界面,而不是操作界面组件。...所以,为什么属性动画没有被移植 Compose 来?因为 Compose 里拿不到界面元素的对象,从而导致属性动画的整个理论模型不再适用了。...虽然说,对于新技术我们国内整体上会比国外保守一些,比如当年从 Eclipse Android Studio,从 Java Kotlin,包括对 RxJava 的广泛接纳,国内对于新技术的接受总会比国外晚一些

59530

Unity Demo教程系列——Unity塔防游戏(六)动画(Lively Enemies)

之后,将时间线移至1:00,将垂直位置设置回0.25,然后再次按录制按钮以停止录制。 ? (位置的三个关键帧) 你可以通过按录制按钮右边稍微一点的播放动画按钮来预览动画。 ?...(弹跳的敌人) 中等立方体最终以锁定步幅进行动画处理,因为它们每秒刷新一次,这与动画持续时间相匹配。 为什么代码补全不能为Playables提供有用的文档?...敌人现在可以从出生移动正常了,但是移动的一部分被跳过了,存在不连续性。发生这种情况是因为所有剪辑耗费时间都流逝,跟他们的权重没有关系。...(Intro,move,Outro) 4 动画过渡 从intromove的过渡是正确的,但是从moveoutro的过渡存在问题。...我们也把intromove做了融合,因为不能保证它们会对齐,而现在展示的只是简单的敌人动画的情况。

2.3K20
  • Unity基础教程-物体运动(七)——移动地面(Going for a Ride)

    动画是一个新资产,但是按下“Create”按钮还会创建另一个资产,我将其重命名为“ Up Down Controller”。这是运行动画所需的动画控制器资产。...(在一个动画的平台上移动) 默认情况下,Unity通过缓和过渡来平滑动画。您可以通过“Animation”窗口底部的切换选项从“Dopesheet”切换到“Curves”模式来精确的控制行为。 ?...(动画曲线,Y坐标为绿色) 为什么不能移动动画对象? 如果对象正在播放更改其位置动画,则该动画位置将覆盖该对象的配置位置。你可以通过将动画对象变成另一个对象的子对象,然后将其移动到其他位置。...(正常动画模式) 事实证明,向上运动有点抖动,而向下运动则更糟,因为球体反复下降一小段距离,撞击平台,然后再次下降。发生这种情况是因为默认情况下,动画每帧更新一次,因此运动与PhysX不同步。...2.1 检测连接 我们不在乎为什么某物在移动,而只是它是否在移动。这个想法是所有动态对象都有一个刚体组件,因此我们将通过向它添加一个字段MovingSphere来跟踪连接的实体。 ?

    2.2K20

    浏览器事件

    浏览器事件 常用浏览器事件与DOM事件,包括鼠标事件、键盘事件、框架/对象事件、表单事件、剪贴板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件。...onreset: 窗口内表单重置时触发。 onselect: 窗口内表单元素中文本被选中时触发。 onsubmit: 窗口内表单中submit按钮被按下触发。...oncanplaythrough: 事件在视频/音频可以正常播放且无需停顿和缓冲时触发。 ondurationchange: 事件在视频/音频的时长发生变化时触发。...onseeked: 事件在用户重新定位视频/音频的播放位置后触发。 onseeking: 事件在用户开始重新定位视频/音频时触发。...过渡相关 atransitionend: 该事件在 CSS 完成过渡后触发。

    2.4K20

    CSS Transitions

    ❝「时间是恒定的」 关于上面所有的例子需要有一个说明:动画经历的时间是恒定的。时间函数描述了一个值如何在固定时间间隔内从01,而不是动画应该多快完成。...动画优化 早些时候,我们提到动画应该以60fps的速度运行。然而,当我们进行计算时,我们意识这意味着浏览器只有16.6毫秒来绘制每一帧。...硬件加速 让我们来看一个小例子:(根据浏览器和操作系统的不同,效果可能不同) 鼠标悬停在我们的Hello World按钮上,仔细观察字母,它们在过渡的开头和结尾似乎位置发生了偏移。...像margin-top这样的属性不能进行子像素渲染,这意味着它们需要四舍五入最接近的像素,从而创建出一个阶梯状、不流畅的效果。...如果他们在这300毫秒窗口内重新进入元素,过渡就不会发生。 在经过300毫秒后,过渡正常启动,下拉菜单会在400毫秒内出现。

    31730

    Figma里这样完成悬浮FAB按钮制作,半小时搞定!

    智能动画创建状态之间的转换。它将寻找状态之间对象的变化并在它们之间进行动画处理。从设计的角度来看,我们设计了开始和结束状态,智能动画将创建两种状态之间的过渡。...我们图层的名称在每个状态中必须相同,智能动画才能正常工作。如果它们的名称不同,智能动画会假定图层是不同的对象。我发现最好命名我们的图层,然后复制以保持图层的命名和组织。...004.过渡类型 在智能动画中,我们可以从多种过渡类型中进行选择。每种过渡类型都会在状态之间创建不同的动画。这些转换可以是个人喜好。花一些时间来处理每种类型,看看它们如何改变动画的感觉。...将所有的状态放在一起 从关闭状态的添加按钮打开状态,反之亦然 8.设置智能动画 在我们的交互详细信息窗格中,选择智能动画。选择过渡类型,“缓出并重新加入”。随意弄乱时间。...将动作按钮实例添加到框架,设置约束并检查固定位置 现在我们开始测试原型。向框架添加一个实例。将约束设置为右下角。最后,检查固定位置,以在滚动时将其保持在原位。

    2.5K20

    从零开始学Android自定义View之动画系列——属性动画(1)

    但是很显然,这些功能是不足以覆盖所有的场景的,一旦我们的需求超出了移动、缩放、旋转和淡入淡出这四种对View的操作,那么补间动画不能再帮我们忙了,也就是说它在功能和可扩展方面都有相当大的局限性,那么下面我们就来看看补间动画不能胜任的场景...比如说,现在屏幕的左上角有一个按钮,然后我们通过补间动画将它移动到了屏幕的右下角,现在你可以去尝试点击一下这个按钮,点击事件是绝对不会触发的,因为实际上这个按钮还是停留在屏幕的左上角,只不过补间动画将这个按钮绘制到了屏幕的右下角而已...新引入的属性动画机制已经不再是针对于View来设计的了,也不限定于只能实现移动、缩放、旋转和淡入淡出这几种动画操作,它实际上是一种不断地对值进行操作的机制,并将值赋值指定对象的指定属性上,可以是任意对象的任意属性...既然属性动画的实现机制是通过对目标对象进行赋值并修改其属性来实现的,那么之前所说的按钮显示的问题也就不复存在了,如果我们通过属性动画来移动一个按钮,那么这个按钮就是真正的移动了,而不再是仅仅在另外一个位置绘制了而已...运行上述代码,控制台打印如下所示: 从打印日志的值我们就可以看出,ValueAnimator确实已经在正常工作了,值在300毫秒的时间内从0平滑过渡到了1,而这个计算工作就是由ValueAnimator

    1.5K30

    Vue.js 系列教程 5:动画

    过渡 vs. 动画 你可能不明白为什么过渡动画在这篇文章中分成了不同的部分,让我解释一下,虽然它们很相似,但也有不同的地方。过渡就是从一个状态向另一个状态插入值。...从起始状态,结束状态,再回来。 动画有点不同,你可以在一个声明中设置多个状态。比如,你可以在动画 50% 的位置设置一个关键帧,然后在 70% 的位置设置一个完全不同的状态,等等。...CSS 过渡 假设有一个简单的模态窗。通过点击按钮显示或隐藏模态窗。...可以正常工作,但是这样的模态窗有点不和谐。 ?...其中 enter/leave 定义动画开始第一帧的位置, enter-active/leave-active 定义动画运行阶段—— 你需要把动画属性放在这里, enter-to/leave-to 指定元素在最后一帧上的位置

    2.8K71

    Android属性动画完全解析(上),初识属性动画的基本用法

    那么这里大家可能要产生疑问了,既然之前的动画机制已经这么健全了,为什么还要引入属性动画呢?...可能有的朋友会感到不能理解,我怎么会需要对一个非View的对象进行动画操作呢?...比如说,现在屏幕的左上角有一个按钮,然后我们通过补间动画将它移动到了屏幕的右下角,现在你可以去尝试点击一下这个按钮,点击事件是绝对不会触发的,因为实际上这个按钮还是停留在屏幕的左上角,只不过补间动画将这个按钮绘制到了屏幕的右下角而已...既然属性动画的实现机制是通过对目标对象进行赋值并修改其属性来实现的,那么之前所说的按钮显示的问题也就不复存在了,如果我们通过属性动画来移动一个按钮,那么这个按钮就是真正的移动了,而不再是仅仅在另外一个位置绘制了而已...从打印日志的值我们就可以看出,ValueAnimator确实已经在正常工作了,值在300毫秒的时间内从0平滑过渡到了1,而这个计算工作就是由ValueAnimator帮助我们完成的。

    1.6K70

    🤔听说这个动效可以玩一天?

    这样一个丝滑的交互能不能玩一天,在下不知道。 但是,把他写出来,在下能写一天,而这,就叫做「工作量」,而在下最喜欢的就是「增加(凑)工作量」。 0.... 按钮1 按钮2 /* 按钮选中缩放动画...这里讲一下为什么需要注意时间,因为在下注意,并不是一经点击按钮动画就开始了,选中状态的类名,是在滑块几乎完全滑到对应按钮背后,按钮的缩放状态和颜色才开始变化,同理未选中状态也类似,只是时间稍微提早。...意犹未尽 本来捏,今天的水文这就结束了 但是,在下在玩这个动效的时候,感觉两个按钮单纯的切换来切换去,是不是太过于单调了?(主要是工作量还没混够) 于是,在下准备给这两个按钮加点功能。...}, 500); setTimeout(() => { wrapper.className = '' }, 550); }) }// 重置按钮类名

    90110

    初学前端用代码实现一个网页老虎机游戏

    没错,少了滚动动画。我们只需要在游戏开始时给列表加上过渡效果即可。可能有人会问为什么要在游戏开始时再加而不是一开始写样式时先写上transtion过渡。...原因是这样子阿:因为小编后续要考虑重置游戏的问题,重置过程列表会回到最开始的定位处,如果说重置过程也有过渡样式那是不太合理的,为了能够保证过渡样式是可控的小编就定义了一个添加过渡的方法,还有一个删除过渡的方法...下面的代码意思就是分别给每个列表添加/删除过渡样式类名(className),删除过渡我们会在重置动画中使用到。...但是呢,小编还想再玩一把,然后我在第二次点击开始手柄之前就想到了这个老虎机存在的缺陷,总结起来包括以下几点: 游戏从开始结束之后,再次点击开始手柄,应该将游戏进行重置 重置游戏的过程中不应该出现过渡效果...,由于游戏开始过程中数字列表添加了过渡动画,会导致数字列表在回到初始位置的过程也会存在过渡动画,因此我们需要调用之前先声明好的removeTranstion()来删除全部数字列表的过渡效果。

    5.3K10

    再谈BOM和DOM(7):HTML DOM Event 对象属性及DOM事件详细列表

    Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用,函数不会在事件发生前被执行!...onreset 重置按钮被点击。 onresize 窗口或框架被重新调整大小。 onselect 文本被选中。 onsubmit 确认按钮被点击。 onunload 用户退出页面。...oncanplaythrough 事件在视频/音频(audio/video)可以正常播放且无需停顿和缓冲时触发。...动画事件 事件 描述 DOM animationend 该事件在 CSS 动画结束播放时触发 animationiteration 该事件在 CSS 动画重复播放时触发 animationstart...该事件在 CSS 动画开始播放时触发 过渡事件 事件 描述 DOM transitionend 该事件在 CSS 完成过渡后触发。

    2.1K40

    从零开始学 Web 之 Vue.js(五)Vue的动画

    一、Vue的动画 为什么要有动画动画能够提高用户的体验,帮助用户更好的理解页面中的功能; Vue 中也有动画,不过远没有 css3 中的那么炫酷。...示例:点击按钮实现标签的淡入淡出: <!...3、既然是半程动画,那么意味着点击按钮的时候,每次小球都是从起始位置出发,而不会从终点位置回到其实位置的过程。 ? 4、列表动画 列表增加,删除项的时候,显示动画效果。 <!...,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transition-group. 2、如果要为 v-for 循环创建的元素设置动画,必须为每一个...实现删除动画的时候,后一个元素补删除元素的位置也能动画,v-move 和 v-leave-active 结合使用,能够让列表的过渡更加平缓柔和: .v-move { transition: all

    1.3K41

    无限滚动加载最佳实践

    返回按钮将用户待回至之前的位置 有时候,无限滚动的实现带来一个主要的可用性缺陷:滚动位置并未被记录为“状态”。如果用户从列表中的链接跳转了,然后点返回按钮,他们希望能回到页面原来相同的位置。...但是列表的位置不再存在了,这意味着使用浏览器的返回按钮一般都导致滚动位置重置页面顶部。无怪乎用户很快就觉得沮丧,都没有一个合适的“回到列表”的功能。 ?...别让你的用户就因为使用返回按钮,找不到列表的位置。很重要的是,用户通过列表访问了某一个项目的详情页,他们点击浏览器返回按钮返回列表的时候,也应该在相同的位置。...Flickr 监听用户点击浏览器后退按钮的行为,满足用户的期望。APP 记住用户的滚动位置,所以当用户按后退按钮的时候,返回到原始位置。 ? 4....制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全 WEB前端性能优化常见方法 一小时内搭建一个全栈Web应用框架 干货:CSS 专业技巧 四步实现React页面过渡动画效果

    4.3K20

    项目需求讨论 — 用Transition做一个漂亮的登录界面

    第二个Activity就会让现在的相同trasitionName的fab按钮,以传过来的第一个Activity的按钮相同位置的为起始点,然后通过动画到了最终的地方。...(所以动画是在第二个Activity中完成的,只是按钮的起始状态是以第一个Activity传过来的按钮的状态信息相同,然后到最终用户设置的位置。)...并且其实动画是绘制在ViewOverlay上面 第二步让fab按钮通过曲线路径变化: 我们直接不做任何处理,默认是fab按钮位置变化是直线。 我们更希望是: ?...其他参考文章: 曲线运动-1 曲线运动 - 2 第三步fab按钮动画结束后出现注册界面: 我们上一步对fab按钮设置了过渡动画。...所以我们在fab按钮过渡动画结束后,不是简单的对cardView设置View.VISIBLE就可以。

    1.8K20

    抖音国庆小游戏是如何实现的?

    游戏开发的一个关键点是在每一帧渲染前更新物体的行为、位置等,通常都放在该回调中。例如当玩家按下前进按钮时,应在每帧的回调中更新玩家的位置。...(Spine)实现,由设计师制作动画,开发时在代码层面调用相关 api 播放已制作好的动画使人物动起来,因此开发者并不需要关注动画的具体实现,而是关注在什么状态下切换至对应的动画,并使用 Mix 实现动作之间的平滑过渡...相比于常见的帧动画,骨骼动画显然需要更多 CPU 开销,但内存开销小,且能够在切换动作时计算出中间的过渡动作,这是帧动画做不到的。...动效实现 这次涉及的动效不算特别多,主要集中在金币、任务 icon、按钮、人物奔跑光效上。...使用序列帧时需要注意的一个点是,若不同帧之间图片的尺寸有所变化,那么 sprite 节点的 size mode 不能为 trim,同时要关闭 trim 选项,否则会导致节点在动画播放过程中发生位置偏移或宽高比变形等问题

    1.5K30

    html笔记

    )submit(提交按钮)reset(重置按钮)image(图片)file(打开文件)date(日期) 试试看就知道啦 name 用户自定义 命名控件的名字,主要用于方便服务器识别控件 value 用户自定义...transition-property :设置某元素不使用过渡效果 transition-duration :动画过渡时间 transition-timing-function :转速曲线 transition-delay...:延迟进行动画 transition:过渡复原时间 属性 属性值 简述作用 transition-property css属性名字 设置的指定属性将取消过渡效果 transition-duration...*/ transition-duration: 500ms; /* 动画过渡时间 */ transition-property: height; /* 设置某元素不使用过渡效果 */...} 我们要在需要进行的过渡的元素里面先放上transition,并设置一个复原时间,上面的代码设置为all 0.3s,这时候再去hover里面写上其他的过渡动画,并在hover里面更改它的大小与颜色即可实现过渡

    1.8K10
    领券