使用 Easing 移动对象——在 Safari 中无法正常工作

Question

我用 JavaScript 创建了一个自定义光标。 – 在这个问题的最后，我将添加所有代码，这里还有一个 fiddle: https://jsfiddle.net/8a9f2s0n/ …但真正重要的是下面这行 CSS: transition: all .1s ease-out;

基本上我删除了实际的光标，然后我将两个圆圈链接到鼠标位置，第二个圆圈 ("cursor2") 有这个 CSS -属性: transition: all .1s ease-out;, 使其移动更轻松。

问题： 我在所有大型浏览器中测试了这段代码，到处都很流畅，除了 Safari，在 Safari 中，第二个更大的圆圈移动真的很慢.

怎么回事？

var cursor = document.querySelector(".cursor");
var cursor2 = document.querySelector(".cursor_2");

var detectIfCursorStatic = undefined;

window.addEventListener('mousemove', function(e){
    // Chain "cursor" and "cursor2" to mouse-position. START
    cursor.style.top = e.y + "px";
    cursor.style.left = e.x + "px";
    
    cursor2.style.top = e.y + "px";
    cursor2.style.left = e.x + "px";
    // Chain "cursor" and "cursor2" to mouse-position. END
    
    cursor.style.display = "block";
    cursor2.style.display = "block";
    
    cursor2.style.transform = "translate(-50%, -50%) scale(1)";
    
    // Change cursor2, when mouse sits still. START
    clearTimeout(detectIfCursorStatic);
    detectIfCursorStatic = setTimeout(function(){
        
        cursor2.style.transform = "translate(-50%, -50%) scale(1.3)";
        setTimeout(function(){
            cursor2.style.transform = "translate(-50%, -50%) scale(0)";
        }, 200);
        
    }, 500);
    // Change cursor2, when mouse sits still. END
});

// Make it, so that when the cursor leaves the viewport, "cursor" and "cursor2" instantly disappear, but when entering the viewport, they blend in. START
document.addEventListener('mouseout', function(){
    cursor.style.opacity = "0";
    cursor2.style.opacity = "0";
    
    setTimeout(function(){
        cursor.style.transition = "opacity .5s linear"
    }, 500);
});

document.addEventListener('mouseover', function(){
    cursor.style.opacity = "1";
    cursor2.style.opacity = ".3";
    
    setTimeout(function(){
        cursor.style.transition = "opacity 0s linear"
    }, 500);
});
// … END

// Make it, so that, when the cursor is hovering over an object, with the class: "cursorInteraction", "cursor" and "cursor2" change colour. START
var cursorInteractionObjects = document.querySelectorAll(".cursorInteraction");

cursorInteractionObjects.forEach(function(element){
    element.addEventListener('mouseenter', function(){
        cursor.style.backgroundColor = "black";
        cursor2.style.backgroundColor = "black";
        cursor2.style.opacity = ".2";
    });
    
    element.addEventListener('mouseleave', function(){
        cursor.style.backgroundColor = "white";
        cursor2.style.backgroundColor = "white";
        cursor2.style.opacity = ".3";
    });
});
// … END

// Example: The custom-cursor is white, it is moved over an object, with the class: "cursorInteraction" and a background-color, of: white, the custom-cursor changes to black. – Inside the object, that the cursor is currently in, there is another object, a button, with: "background-color: black", on :hover, so the custom-cursor has to change again, in this case the custom-cursor will change in such a way, that it is no longer visible. – Such buttons, are assigned the following class: "cursorInteraction_Negative".
var cursorInteractionObjects_Negative = document.querySelectorAll(".cursorInteraction_Negative");

cursorInteractionObjects_Negative.forEach(function(element){
    element.addEventListener('mouseenter', function(){
        cursor.style.opacity = "0";
        cursor2.style.zIndex = "-1";
    });
    
    element.addEventListener('mouseleave', function(){
        cursor.style.opacity = "1";
        cursor2.style.zIndex = "0";
    });
});
// … END

@charset "UTF-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    cursor: none;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: white;
}

body {
    background-color: black;
}

body, html {
    height: 100%; /* <- Firefox needs this. – This might not be necessary in the final website, because there will be objects spanning the whole viewport. */
}

.test_div {
    background-color: white;
    position: fixed;
    width: 400px;
    height: 200px;
    margin: 15px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.test_button {
    border: 1px solid black;
    height: 50px;
    width: 150px;
    line-height: 50px;
    text-align: center;
    font-family: proxima-nova, sans-serif;
}

.test_button:hover {
    background-color: black;
}

/* Custom Cursor START */
.cursor {
    z-index: 10;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: white;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}

.cursor_2 {
    z-index: 9;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: white;
    opacity: .3;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
    
    transition: all .1s ease-out;
}
/* Custom Cursor END */

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Personal-Website Build-5</title>
        
        <link rel="stylesheet" href="style.css">
        
    </head>

    <body>
        <div class="test_div cursorInteraction">
            <a href="" class="test_button cursorInteraction_Negative"> Test Link </a>
        </div>
        
        <!-- Custom-Cursor START -->
        <div class="cursor"></div>
        <div class="cursor_2"></div>
        
        <script src="scripts/customCursor.js"></script>
        <!-- Custom-Cursor END -->
    </body>
</html>

Answer 1

似乎在 Safari 中每次更新过渡属性时都会重置过渡效果。这导致了滞后效应。要解决此问题，您可以使用下划线节流功能或您的首选实现来节流更新 cursor2 位置的代码。

示例如下：

var cursor = document.querySelector(".cursor");
var cursor2 = document.querySelector(".cursor_2");

var detectIfCursorStatic = undefined;

var updateCursor2 = _(function(e) {
   cursor2.style.top = e.y + "px";
   cursor2.style.left = e.x + "px";
}).throttle(50);


window.addEventListener('mousemove', function(e){
    // Chain "cursor" and "cursor2" to mouse-position. START
    cursor.style.top = e.y + "px";
    cursor.style.left = e.x + "px";
    
    updateCursor2(e);
    // Chain "cursor" and "cursor2" to mouse-position. END
    
    cursor.style.display = "block";
    cursor2.style.display = "block";
    
    cursor2.style.transform = "translate(-50%, -50%) scale(1)";
    
    // Change cursor2, when mouse sits still. START
    clearTimeout(detectIfCursorStatic);
    detectIfCursorStatic = setTimeout(function(){
        
        cursor2.style.transform = "translate(-50%, -50%) scale(1.3)";
        setTimeout(function(){
            cursor2.style.transform = "translate(-50%, -50%) scale(0)";
        }, 200);
        
    }, 500);
    // Change cursor2, when mouse sits still. END
});

// Make it, so that when the cursor leaves the viewport, "cursor" and "cursor2" instantly disappear, but when entering the viewport, they blend in. START
document.addEventListener('mouseout', function(){
    cursor.style.opacity = "0";
    cursor2.style.opacity = "0";
    
    setTimeout(function(){
        cursor.style.transition = "opacity .5s linear"
    }, 500);
});

document.addEventListener('mouseover', function(){
    cursor.style.opacity = "1";
    cursor2.style.opacity = ".3";
    
    setTimeout(function(){
        cursor.style.transition = "opacity 0s linear"
    }, 500);
});
// … END

// Make it, so that, when the cursor is hovering over an object, with the class: "cursorInteraction", "cursor" and "cursor2" change colour. START
var cursorInteractionObjects = document.querySelectorAll(".cursorInteraction");

cursorInteractionObjects.forEach(function(element){
    element.addEventListener('mouseenter', function(){
        cursor.style.backgroundColor = "black";
        cursor2.style.backgroundColor = "black";
        cursor2.style.opacity = ".2";
    });
    
    element.addEventListener('mouseleave', function(){
        cursor.style.backgroundColor = "white";
        cursor2.style.backgroundColor = "white";
        cursor2.style.opacity = ".3";
    });
});
// … END

// Example: The custom-cursor is white, it is moved over an object, with the class: "cursorInteraction" and a background-color, of: white, the custom-cursor changes to black. – Inside the object, that the cursor is currently in, there is another object, a button, with: "background-color: black", on :hover, so the custom-cursor has to change again, in this case the custom-cursor will change in such a way, that it is no longer visible. – Such buttons, are assigned the following class: "cursorInteraction_Negative".
var cursorInteractionObjects_Negative = document.querySelectorAll(".cursorInteraction_Negative");

cursorInteractionObjects_Negative.forEach(function(element){
    element.addEventListener('mouseenter', function(){
        cursor.style.opacity = "0";
        cursor2.style.zIndex = "-1";
    });
    
    element.addEventListener('mouseleave', function(){
        cursor.style.opacity = "1";
        cursor2.style.zIndex = "0";
    });
});
// … END

@charset "UTF-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    cursor: none;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: white;
}

body {
    background-color: black;
}

body, html {
    height: 100%; /* <- Firefox needs this. – This might not be necessary in the final website, because there will be objects spanning the whole viewport. */
}

.test_div {
    background-color: white;
    position: fixed;
    width: 400px;
    height: 200px;
    margin: 15px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.test_button {
    border: 1px solid black;
    height: 50px;
    width: 150px;
    line-height: 50px;
    text-align: center;
    font-family: proxima-nova, sans-serif;
}

.test_button:hover {
    background-color: black;
}

/* Custom Cursor START */
.cursor {
    z-index: 10;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: white;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}

.cursor_2 {
    z-index: 9;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: white;
    opacity: .3;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
    
    transition: all .1s ease-out;
}
/* Custom Cursor END */

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Personal-Website Build-5</title>
        
        <link rel="stylesheet" href="style.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.12.0/underscore-min.js" integrity="sha512-BDXGXSvYeLxaldQeYJZVWXJmkisgMlECofWFXKpWwXnfcp/R708nrs/BtNLH5cb/5TE7aeYRTDBRXu6kRL4VeQ==" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="test_div cursorInteraction">
            <a href="" class="test_button cursorInteraction_Negative"> Test Link </a>
        </div>
        
        <!-- Custom-Cursor START -->
        <div class="cursor"></div>
        <div class="cursor_2"></div>
        
        <script src="scripts/customCursor.js"></script>
        <!-- Custom-Cursor END -->
    </body>
</html>

使用 Easing 移动对象——在 Safari 中无法正常工作

Move object with Easing – not working properly in Safari

javascript

css

safari