jquery - 按下按钮时动画跨度

Question

我正在尝试创建一个网络作品集，我希望当按下其中一个按钮为文本腾出空间时，着陆页上的两个按钮会向上移动。出于某种原因，按钮不会随着我当前的设置而移动。有任何想法吗？这是我的相关代码:

JavaScript

$(document).ready(function(){
$('button').click(function(){
    $('#Name').addClass("animated fadeOutUp")
    $('#options').addClass("slideUp")})})

html

<div class = "content animated fadeInUp">
                <h1 id="Name">TOM KAIZER</h1>
                <p></p>
                <span id = "options">
                        <button type = "button" class = "button grow"class = 'resume' style = "text-decoration: none; color: black;">Resume</button>
                        <button type = "button" class = "button grow contact" style = "text-decoration: none; color: black;">Contact Me</button>
                </span>
        </div>

CSS

@keyframes slideUp{
        from{
            opacity: 0;
        }
        to{
            opacity:1;
            transform: translateY(-20px);
        }
    };
    @-webkit-keyframes slideUp{
        from { top: 0; left: 0; }
        to   { top: 100px; left: 100px; }
    };

    .slideUp{
        animation-name:slideUp;
        -webkit-animation-name:slideUp;
        animation-duration: 3s;
        -webkit-animation-duration: 3s;
        animation-fill-mode: forwards
    }

Answer 1

这是一个放置问题。只需将 @keyframes 放在 .slideUp 之后即可。要使按钮实际移动，您需要设置 CSS 显示属性。

.slideUp{
        position: absolute;
        animation-name:slideUp;
        -webkit-animation-name:slideUp;
        animation-duration: 3s;
        -webkit-animation-duration: 3s;
        animation-fill-mode: forwards;
}

@keyframes slideUp{
        from{
            opacity: 0;
        }
        to{
            opacity:1;
            transform: translateY(-20px);
        }
    };
    @-webkit-keyframes slideUp{
        from { top: 0; left: 0; }
        to   { top: 100px; left: 100px; }
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "content animated fadeInUp">
                <h1 id="Name">TOM KAIZER</h1>
                <p></p>
                <span id = "options">
                        <button type = "button" class = "button grow"class = 'resume' style = "text-decoration: none; color: black;">Resume</button>
                        <button type = "button" class = "button grow contact" style = "text-decoration: none; color: black;">Contact Me</button>
                </span>
        </div>
<script>
$(document).ready(function(){
$('button').click(function(e){
  $('#Name').addClass("animated fadeOutUp");
  $('#options').addClass("slideUp");
  });
});

</script>