javascript - Css 和 Javascript 在动画和动画中制作加载状态的最佳方式

Question

我想在页面加载时制作介绍性 DOM 动画，如果我单击链接，页面会制作出动画和加载状态，并在页面加载时制作 in 动画。实现这一目标的最佳方法是什么？非常欢迎任何建议、链接教程、视频。非常感谢你们!!!

Answer 1

高效创建动画的一个好方法是使用 CSS animations .

您可以创建在加载对象时触发的各种动画。

然后使用 javascript，您可以添加或删除额外的 css 类来触发额外的动画。

$("#button").click(function() {
  $('.Bx').toggleClass('Grow');
});

.Bx {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    -webkit-transition: all 2s ease;  
    -moz-transition: all 2s ease;  
    -o-transition: all 2s ease;  
    -ms-transition: all 2s ease;  
    transition: all 2s ease;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Triggered animation */
.Grow {
  background-color: #45CEE0;
  height: 200px;
  width: 200px;
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Bx"></div>
<input type="button" id="button" value="Click Me"></input>