从右过渡：0；向右：自动；

Question

有没有办法从右边过渡：0；向右：自动；在一个位置上：固定的；物品？我知道，如果我设置一个值而不是“自动”，那么转换就会起作用，尽管在自动上它不会。有什么解决办法吗？

物品：

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");
    }
});
});

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

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

Answer 1

不要将transition 用于height，而是使用transform：

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

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");
    }
});
});

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

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

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