Question

我有以下代码可以完成我需要做的几乎所有事情。

＆＃13;

.mouse {
  margin-bottom:20px;
  padding:5px;
  overflow:hidden;
  width:200px;
}
.mouse:after {
  content:"";
  height:2px;
  display:block;
  background:red;
  margin-top:5px;
  transform:translateX(100%);
  animation: hoverOut 1.5s ease 1;
}
.mouse:hover:after {
  animation: hoverIn 1.5s ease 1;
}
@keyframes hoverOut {
  0% {transform:translateX(0%);}
  100% {transform:translateX(100%);}
}
@keyframes hoverIn {
  0% {transform:translateX(-100%);}
  100% {transform:translateX(0%);}
}

＆＃13;

<div class="mouse">watch the line below</div>

＆＃13;

基本上，当您将鼠标悬停在文本上方时，会看到左侧的线条滑入。当您将鼠标移开时，您会看到该线向右滑动。

我的问题是，如果您转到浏览器并按下刷新按钮以导致页面加载，您将看到一条线路向右移动。我不希望这个动画效果对页面加载。我只能用HTML和CSS做些什么吗？我不想引入Javascript，除非我绝对必须。

Answer 1

不使用animation，而是使用Kaltura site documentation found here，其属性为transition，值为scaleX。

＆＃34;技巧＆＃34;这是要更改hover州的transform。

基本上你这样做：

.mouse:after {
  content: "";
  transform: scaleX(0);
  transition: transform 1.5s ease;
  transform-origin: right;
}
.mouse:hover:after {
  transform: scaleX(1);
  transform-origin: left;
}

代码段：

＆＃13;

.mouse {
  margin-bottom: 20px;
  padding: 5px;
  overflow: hidden;
  width: 200px;
}
.mouse:after {
  content: "";
  height: 2px;
  display: block;
  background: red;
  margin-top: 5px;
  transform: scaleX(0);
  transition: transform 1.5s ease;
  transform-origin: right;
}
.mouse:hover:after {
  transform: scaleX(1);
  transform-origin: left;
}

＆＃13;

<div class="mouse">watch the line below</div>

＆＃13;

如果您想要原样使用animation，则需要使用javascript。

您需要在用户悬停元素后添加一个类，在本例中为.running。

基础是：

.mouse:after {
  content: "";
  transform: translateX(100%);
  animation: hoverOut 1.5s ease 1;
  animation-play-state: paused; /* Initial state of the animation, paused. */
  animation-delay: -1.5s; /* Get the first frame of the animation, this value has to be the total duration of the animation with a negative value */
}
.mouse.running:after {
  animation-play-state: running; /* When the class is added, the animation state is changed to running */
  animation-delay: 0s /* Set back to normal flow. */;
}

代码段：

＆＃13;

document.querySelector(".mouse").addEventListener("mouseenter", function() {
  this.classList.add("running");
});

＆＃13;

.mouse {
  margin-bottom: 20px;
  padding: 5px;
  overflow: hidden;
  width: 200px;
}
.mouse:after {
  content: "";
  height: 2px;
  display: block;
  background: red;
  margin-top: 5px;
  transform: translateX(100%);
  animation: hoverOut 1.5s ease 1;
  animation-play-state: paused;
  animation-delay: -1.5s;
}
.mouse.running:after {
  animation-play-state: running;
  animation-delay: 0s;
}
.mouse:hover:after {
  animation: hoverIn 1.5s ease 1;
}
@keyframes hoverOut {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes hoverIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

＆＃13;

<div class="mouse">watch the line below</div>

＆＃13;

Answer 2

动画总是在元素变得可见时运行。（或页面加载）

对于类似的内容，您希望使用转换。更加精简。
以下是使用转换的代码。

</style>
</head>
<body>
<div class="mouse">watch the line below</div>
</body>
</html>

$scope.selectedId = 2

$scope.getResource = function(){
    console.log("lame", $scope.selectedId);
    Service.getResource($scope.id).then(function(response){
        $scope.resource = response;
    });
};

不要让：动画规则在页面加载后触发

2 个答案: