Question

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

Answer 1

有效创建动画的好方法是使用CSS animations。

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

然后使用javascript，您可以添加或删除其他css类以触发其他动画。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Css和Javascript制作加载状态，动画和动画的最佳方法

1 个答案: