当前位置: 首页 > 知识库问答 >
问题:

前端 - 点击div盒子,有0.2s的背景色变化的动画,怎么等动画结束后,再触发路由跳转?

闾丘昊然
2023-08-15

vue2项目,我只想到一个setTimeout方法,有没有更优的方法?

共有1个答案

聂迪
2023-08-15
<div @animationend="router.push('xx')"></div>

参考 animationend 事件 | MDN

 类似资料:
  • 我正在尝试创建背景色CSS3关键帧动画后的第一个动画,这是一个背景图像。我无法创建另一个动画后,文字动画淡出。文本动画褪色后,我想背景的不透明度转到0.3,并再次褪色在文本。下面是我所拥有的。 请在此处查看完整代码:codepen:https://codepen.io/imdaone/pen/jjryyv

  • 问题内容: 我试图通过使用CSS过渡来更改悬停元素的背景颜色。我想通过使其从底部向上滚动来做到这一点。我可以使用此功能淡化背景,但我希望它向上滑动: 另一个想法是,将背景应用到一个单独的元素上会更好吗? 问题答案: 为了 向上滑动背景色, 您需要使用背景图片或某种渐变,同时逐步调整:

  • 本文向大家介绍如何在鼠标悬停时使用jQuery动画化背景颜色的变化?,包括了如何在鼠标悬停时使用jQuery动画化背景颜色的变化?的使用技巧和注意事项,需要的朋友参考一下 若要更改背景颜色,请使用mouseenter事件。放置鼠标光标时背景色发生变化: 鼠标光标放在以下元素上: 您可以尝试运行以下代码,以了解如何为鼠标悬停时的背景色变化设置动画: 示例

  • 类似这样,飘忽不定的感觉

  • 问题内容: 我的网站上有一些CSS3动画,它在Safari上运行良好,但是当我在Firefox中运行该网站时,它没有动画。这是代码: 现在我注意到,当网站点击 如果我将这些更改为 然后就可以了,但是显然我要使用图像。我试过添加-moz-前缀,但是不起作用。我想念什么?有没有办法让Firefox承认 问题答案: 到目前为止,在背景图像之间进行插值的功能是一项非常新的提议,并且在浏览器中并未很好地支持

  • 对于普通用户来说,是关注一个应用本身、还是更关注这个应用的元素从 A 点到 B 点转变的过程,这种选择往往有些难。谨慎编排的动画可以在有多步操作的过程中有效地引导用户的注意力;在版面变化或元素重组时避免造成困惑;提高用户体验的整体美感。动画设计不仅应当优美,更应当服务于功能。 示例 示例 示例 1: 示例 2: 视觉连贯性 在两个视觉效果不同的页面之间的转场应该平滑、轻快,更重要的是使用户感觉清晰