Question

当我在按钮上使用mouseenter时，我希望在单独的元素上触发CSS3动画中的缩放命令。

我的代码目前正在执行此操作，但是我需要使用比例来保持它的完成点直到鼠标移除，然后缩放的元素需要缩放回初始尺寸。

我该怎么做？

这是我的代码：

$("#button").mouseenter(function() {
$('.transform').toggleClass('classname');
});

CSS：

.transform {
-webkit-transition: all 2s ease;  
-moz-transition: all 2s ease;  
-o-transition: all 2s ease;  
-ms-transition: all 2s ease;  
transition: all 2s ease;
}

.classname {
-webkit-animation: cssAnimation 1.000s 1 ease;
-moz-animation: cssAnimation 1.000s 1 ease;
-o-animation: cssAnimation 1.000s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: scale(1.000) }
to { -webkit-transform: scale(0.800) }
}

谢谢。

Answer 1

改为使用.hover()事件处理程序。

将mouseenter更改为hover

$("#button").hover(function() {
    $('.transform').toggleClass('classname');
});

与

相同

$("#button").on('mouseenter mouseleave', function() {
    $('.transform').toggleClass('classname');
});

第一部分是基于如何删除类..

但是你不需要使用动画进行缩放..只需转换即可。

由于默认情况下转换是双向的，所以一旦删除了类，它将自动处理扩展。

http://jsfiddle.net/3tsuS/

演示

如何在CSS3 in-till mouseleave中保持元素缩放？然后在mouseleave scale上将元素恢复为原始大小

1 个答案: