Question

我正在尝试创建一个Web文件夹，并且当按下其中一个按钮为文本留出空间时，我希望登录页面上的两个按钮向上移动。由于某些原因，按钮将不会随着我当前的设置而移动。有任何想法吗？这是我的相关代码：

javascript

<Directory /usr/local/administer/web>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

<VirtualHost *:80>
    DocumentRoot /usr/local/administer/
    ServerName administer.com
    ServerAlias www.administer.com
    RMode config
    RUidGid root root
    RGroups root
</VirtualHost>

html

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

CSS

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

Answer 1

这是一个放置问题。只需将@keyframes放在.slideUp之后，它将起作用。要使按钮实际移动，您需要设置CSS display属性。

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

按下按钮时动画化跨度

1 个答案: