Question

我一直在用纯粹的CSS悬停动画，将动画应用到元素：悬停然后将相同的动画反向移动到常规元素，这样当鼠标移开时元素返回到它＃39;原始状态，这很好但是当用户将鼠标移离元素时触发的任何动画也会在页面加载时运行。我理解为什么会这样，但我想知道是否有办法阻止它？最好不要使用JS，但我不明白这是怎么可能的

正在使用的当前代码，悬停时的简单动画：

.image{
  animation: hoverout 1s ease-in-out forwards;
}

.image:hover{
  animation: hover 1s ease-in-out forwards;
}

@keyframes hover{
  0%{
    opacity: 0;
  }

  100%{
    opacity: 0.5;
  }
}

@keyframes hoverout{
  0%{
    opacity: 0.5;
  }

  100%{
    opacity: 0;
  }
}

Answer 1

您无需在这样简单的悬停中使用animation和keyframes。请改用transition。 transition只在2个点之间转换，在这种情况下，在悬停状态和非悬停状态之间。

它看起来像这样：

.image {
  opacity: 0;
  transition: opacity 300ms;
}

.image:hover {
  opacity: 1;
}

在这种情况下，我将opacity设置为在悬停时转换。您可以使用逗号（例如transition: opacity 300ms, color 300ms）为此添加更多值，或者通过转换所有内容transition: all 300ms来简化它，但这会带来更多性能。

Answer 2

嗯，这是一个问题。

1）您可以使用setTimeout(function(){ $('.image')[0].style.visibility = 'visible'; }, 1000) element { visibility: hidden; } element:hover { visibility: visible; }来解决它。试试这个：

$(document).ready(function ($) {
   setTimeout(function(){
       $('.image')[0].style.visibility = 'visible';
   }, 1000)
});

＆＃13;

.image-parent {
    border: 1px solid;
    width: 100px;
    height: 100px;
}

.image-parent .image {
    width: 100%;
    height: 100%;
    background: red;
    visibility: hidden;
    opacity:0;
    animation: hoverout 1s ease-in-out;
}

.image-parent:hover .image {
    visibility: visible;
    animation: hover 1s ease-in-out forwards;
}

@keyframes hover {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes hoverout {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="image-parent">
    <div class="image"></div>
</div>

＆＃13;

animation

＆＃13;

Here可以帮助你。

2）如果您使用的是keyframe和transition，则可以将其替换为opacity和element { opacity:0; transition:opacity 1s, transform 0.5s; } element:hover { opacity:1; transform : rotateX(90deg); }。例如：

.image-parent {
    border: 1px solid;
    width: 100px;
    height: 100px;
}
.image{
    width: 100%;
    height: 100%;
    border: 1px solid;
    background: red;
    opacity: 0;
    transition: opacity 1s;
}

.image:hover{
    opacity: 0.5;
}

Here可以帮助你。

＆＃13;

<div class="image-parent">
    <div class="image"></div>
</div>

＆＃13;

 public bool IsPermissionInRole(string _permission)
 {
    return Permissions.Any(p => p.Name == _permission);
 }

＆＃13;

CSS悬停动画在页面加载时播放

2 个答案: