Question

这是一个简单的CSS过渡。

div.simple_transition {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 5s;
  /* For Safari 3.1 to 6.0 */
  transition: width 5s;
  &:hover {
    width: 100%;
  }
}

<h1>Simple Transition</h1>
<p>NoJS Animation starts when hovering the element</p>
<div class="simple_transition"></div>
<p>
  <b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

因此，我希望它以编程方式启动转换，例如，在浏览器加载页面后不使用鼠标悬停css选择器的情况下。我知道我可以使用javascript做到这一点，并且设法用一个简单的代码来做到这一点。

//Based on https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
$(document).ready(function() {
  var elm = $('div.simple_transition');
  elm.attr('class', 'should-be-likethis');
  console.log('working on it');
});

div.simple_transition {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 5s;
  /* For Safari 3.1 to 6.0 */
  transition: width 5s;
  &:hover {
    width: 100%;
  }
}

.should-be-likethis {
  -webkit-transition: width 5s;
  /* For Safari 3.1 to 6.0 */
  transition: width 5s;
  width: 100%;
  height: 100px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<h1>Simple Transition</h1>

<p id='text'>With jQuery animation starts without hovering the element</p>
<div class="simple_transition"></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

是否可以仅在CSS中不使用javascript来做到这一点？ 实际上，在我当前的项目中，我已经在使用javascript（ajax）来处理一些与数据相关的查询，并且我还在使用sass编译器，因此，我宁愿在CSS中编写与样式相关的所有内容。

Answer 1

我更改了您的班级名称，以匹配新的行为（动画，而不是过渡）。我们正在将100px动画化为视口的整个宽度。

html, body { margin: 0; } /* Prevent scrollbar */

div.simple_animation {
  width: 100px;
  height: 100px;
  background: red;
  animation: 5s loading forwards;
}

@keyframes loading {
  to {
    width: 100vw;
  }
}

<div class="simple_animation"></div>

jsFiddle

Answer 2

css

.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}

我已经脱离Web开发了一段时间，但是我认为这适用于大多数现代浏览器

我可以不使用javascript

2 个答案: