CSS:非绝对元素中的过渡+缩放

标签 css transform transition

我在这个网站上遇到问题: http://www.bacubacu.com/paybus/

如果您将鼠标悬停在底部的这 3 个大圆形按钮中的任何一个上,动画效果会很好(它们是绝对的)。

如果您将鼠标悬停在显示“ver historial”的位置,动画会跳到开头并停止,即使“tap”类仍然处于事件状态。我发现它与元素定位(非绝对定位)有关。

我不知道为什么会这样,你们谁能帮我解决一下?

这是CSS代码:

.touch{
    transition: transform 0.15s ease-out;
    -webkit-transition: -webkit-transform 0.15s ease-out;
} 
.touch.tap{
        -webkit-transform: scale3D(0.9,0.9,0.9);
   } 

最佳答案

好的,我自己找到了答案。它在将“display:inline-block”添加到 anchor 元素时得到修复。我不知道问题出在哪里,对不起,如果我的问题不是太具体(我的英语也帮不上忙,嘿嘿)。

https://jsfiddle.net/15ryknk5/10/

display:inline-block;

关于CSS:非绝对元素中的过渡+缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33644331/

相关文章:

css - 如何使用 flexbox 将两个按钮对齐到 'position:absolute' 的 div 的中心?

jquery - 无法让 "overflow: hidden"处理图像

d3.js - 圆半径不会在 d3 中的过渡时更新

javascript - <div> 间接更改大小时不会触发过渡

使用透视、rotateX、rotateY 和缩放时 Webkit 中的 CSS Transform 悬停错误

javascript - 旋转 View 会消失它的一些内容

javascript - 出于某种原因,我的 unslider 不随屏幕缩放..包括 fiddle

html - 在类之间共享属性

jquery - Bootstrap 3 列在应用固定定位后水平移动

wpf - 如何在WPF应用程序中绘制色轮?