Question

我希望有人可以帮助解决这个问题！

我在一个以页面为中心的div中有一个徽标，它被分成两个不同的图像，因此我可以让它们从不同的方向进行动画处理，并叠加成一个完整的徽标：完成工作。

然后我有一个按钮，当点击它时，它会自动生成，2个图像和徽标标题图像消失，并用一个徽标图像替换它。这工作正常，仍然在页面上。

我要做的是将从页面中心进入的单个徽标图像设置为页面左上角的动画。动画适用于图像本身，只是没有div，所以看起来很乱。我已经去搞乱了jquery，但似乎无法得到它！谁能对此有所了解？我在这里有一个简单的例子：http://endframe.saturn-global.com/

非常感谢任何建议！

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="assets/estyle.css">
</head>
<body>
<div class="container-fluid">

  <div class="logo">
    <div class="logocontainer">
      <img class="logoE" src="img/logoE.png" alt="Logo Letter E">
      <img class="logoF" src="img/logoF.png" alt="Logo Letter F">
      <img class="thelogo" src="img/thelogo.png" alt="Endframe Logo">
    </div>
    <div class="logotitle">
    <img src="img/logotitle.png" alt="Logo Title">
    </div>
    <div class="beginbutton">
    <button class="btn beginbtn">Let's Begin!</button>
    </div>
  </div>
 <div class="content" style="opacity:0;color:#000;margin-top:200px;padding:20px;">
 some content
</div> 

</div>

<script src="assets/ejs.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script>
$('.beginbutton').click(function() {
    $("body").css("background","#ffffff");
    $(".beginbtn").css("opacity","0");
    $(".logoE").css("opacity","0");
    $(".logoF").css("opacity","0");
    $(".logotitle").css("opacity","0");
    $(".content").css("opacity","1");   
    $(".thelogo").css(
    {
    "opacity" : "1",
    "left" : "0",
    "margin" : "0 auto",
    }   
    );
    $(".logo").css(
    {
    "top" : "0",
    "left" : "0",
    "bottom" : "auto",
    "right" : "auto",
    "text-align:" : "left",
    "margin" : "0 auto",
    });
})
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script></body>
</html>

CSS：

body {
    background: #000;
    color:#fff;
    transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -moz-transition: .6s ease-in-out;
}

.logo {
    position:fixed;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:300px;
    height:300px;
    text-align:center;
    transition: 3s ease-in-out;
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
}

.logocontainer {
    width:100px;
    margin:auto;
    text-align:center;
}

.logocontainer img {
    width:100px;
    height:auto;
    display:block;
    margin:auto;
}

img.logoE {
    position:absolute;
    z-index:1;
    left:50%;
    margin-left:-50px;
    animation:logoEanim 4s;
    -webkit-animation:logoEanim 4s;
    -moz-animation:logoEanim 4s;
}

img.logoF {
    position:absolute;
    z-index:2;
    left:50%;
    margin-left:-50px;
    padding-top:1.8em;
    padding-left:1.8em;
    animation:logoFanim 4s;
    -webkit-animation:logoFanim 4s;
    -moz-animation:logoFanim 4s;
}

img.thelogo {
    position:absolute;
    z-index:3;
    left:50%;
    margin-left:-50px;
    opacity: 0;
    transition: 3s ease-in-out;
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
}

@keyframes logoEanim {
    from {left:-100%;opacity:0;}
    to {left:50%;opacity:1;}
}

@-webkit-keyframes logoEanim {
    from {left:-100%;opacity:0;}
    to {left:50%;opacity:1;}
}

@keyframes logoFanim {
    from {left:200%;opacity:0;}
    to {left:50%;opacity:1;}
}

@-webkit-keyframes logoFanim {
    from {left:200%;opacity:0;}
    to {left:50%;opacity:1;}
}

.logotitle {
    margin-top:100px;
    animation: etitle 5s ease-in-out;
    -webkit-animation: etitle 5s ease-in-out;
    -moz-animation: etitle 5s ease-in-out;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
}

.logotitle img {
    width:280px;
    height:50px;
    padding:10px 10px;
}

@-webkit-keyframes etitle {
    0% {opacity:0;}
    55% {opacity:0;}
    100% {opacity:1;}
}

@keyframes etitle {
    0% {opacity:0;}
    55% {opacity:0;}
    100% {opacity:1;}
}

.beginbtn {
    position:relative;
    font-weight:bold;
    font-size:1.8em;
    padding:3px 10px;
    border:2px solid #000;
    border-radius:10px;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    box-shadow: -2px 2px rgba(153,206,255,1);
}

.beginbutton {
    animation: beginanim 6s ease-in-out;
    -webkit-animation: beginanim 6s ease-in-out;
    -moz-animation: beginanim 6s ease-in-out;
}

.beginbtn:hover {
    cursor:pointer;
}

@-webkit-keyframes beginanim {
    0% {opacity:0;}
    60% {opacity:0;}
    100% {opacity:1;}
}

@keyframes beginanim {
    0% {opacity:0;}
    60% {opacity:0;}
    100% {opacity:1;}
}

.beginbtn:hover {
}

.beginbtn:focus {
    box-shadow:none;
}

.beginbtn:active {
}

Answer 1

你遇到的问题是你在$（'。logo'）。css中从auto更改为0，当你这样做时没有应用动画，因为浏览器不知道如何从实际位置到下一个。你应该使用实际的数值做一些事情。试试这个：

$(".logo").css(
   {
      "top" : "calc(-100vh + 340px)",
      "left" : "calc(-100vw + 300px)",
      "bottom" : "auto",
      "right" : "auto",
      "text-align:" : "left",
      "margin" : "0 auto",
   }
);

Answer 2

如果徽标div和动画在左侧和上方的0处工作，我使用50％的左侧和顶部修复它，图像在外面，所以一切都很好！谢谢Carlos ror的建议！

CSS / jquery将居中div从居中位置移动到窗口的左上角

2 个答案: