Question

有没有办法从右边过渡：0;右：汽车;在一个位置：固定;项目？我知道如果我设置一个值而不是＆＃39; auto＆＃39;然后过渡工作，虽然在汽车它没有。有什么工作吗？

项目：

＆＃13;

jQuery(document).ready(function() {
    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 200) {
        $(".Donation_Container").addClass("Donation_Container2");
    } else {
        $(".Donation_Container").removeClass("Donation_Container2");
    }
});
});

＆＃13;

body {
height: 2000px;
}

.Donation_Container {
    position: fixed;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    left: 0;
    bottom: 0;
    z-index: 50;
    right: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.Donation_Container2 {
    left: 0;
    right: auto;
    bottom: 0;
    z-index: 50;
}

.Donation_Container a {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    color: red;
    text-decoration: none;
    font-size: 2.5rem;
    text-transform: uppercase;
    text-shadow:
    -1px -1px 0 white,  
    1px -1px 0 white,
    -1px 1px 0 white,
     1px 1px 0 white;
    font-weight: 700;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Donation_Container">
    <a href="#"><i class="fa fa-heart" aria-hidden="true"></i><br>Donation</a>
</div>

＆＃13;

Answer 1

而不是使用transition height使用transform：

left: 50%;
transform: translateX(-50%);

＆＃13;

jQuery(document).ready(function() {
    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 200) {
        $(".Donation_Container").addClass("Donation_Container2");
    } else {
        $(".Donation_Container").removeClass("Donation_Container2");
    }
});
});

＆＃13;

body {
height: 2000px;
}

.Donation_Container {
    position: fixed;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50 -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.Donation_Container2 {
    left: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(0%);
}

.Donation_Container a {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    color: red;
    text-decoration: none;
    font-size: 2.5rem;
    text-transform: uppercase;
    text-shadow:
    -1px -1px 0 white,  
    1px -1px 0 white,
    -1px 1px 0 white,
     1px 1px 0 white;
    font-weight: 700;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Donation_Container">
    <a href="#"><i class="fa fa-heart" aria-hidden="true"></i><br>Donation</a>
</div>

＆＃13;

您所需要的只是具体的left或right而不是auto，因此您可以设置left: 50%，滚动设置left: 0但是将其放置在页面中心你需要transform: translateX(-50%)

从右边过渡：0;右：自动;

1 个答案: