Почему анимация карточек запаздывает в Chrome и не работает в Firefox? - PullRequest
Новая
       10

Почему анимация карточек запаздывает в Chrome и не работает в Firefox?

0 голосов
/ 09 сентября 2018

Веб-сайт: https://c6531672.000webhostapp.com

Я добавил анимацию, когда вы нажимаете кнопку «Читать далее» на карточке.Анимация создается с переходом в CSS и измененным значением в CSS.Эта анимация в сафари очень плавная, но в сафари она очень медленная и даже не работает в Firefox.Иногда карта даже не открывается в Firefox.Я подозреваю, что все эти вопросы тесно связаны.Я также добавил код здесь, но он не работает так, как задумано, поэтому просмотрите сайт.Спасибо. 

"use strict";

const buttons = document.getElementsByTagName("button");
const overlay = document.getElementsByClassName("overlay");
const animationTime = 600;
// let addStoreButtonWidth = document.getElementsByTagName("button")[0].scrollWidth;

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", createRipple);
    // buttons[i].style.width = addStoreButtonWidth;
};

let circle = document.createElement("div");

function createRipple(e) {

    var d = Math.max(this.scrollWidth, this.scrollHeight);

    circle.style.width = circle.style.height = d + "px";

    circle.style.left = e.pageX - this.offsetLeft - d / 2 + "px";
    circle.style.top = e.pageY - this.offsetTop -  d / 2 + "px";

    circle.classList.add("ripple");

    this.appendChild(circle);
    // setTimeout(function(){
    //     for (let i = 0; i < circle.length; i++)
    //     document.getElementsByClassName("ripple")[i].remove();
    // }, animationTime);
}

let card = document.getElementsByClassName("card");
let cardButton = document.getElementsByClassName("card-button");
let cardOpen = document.getElementsByClassName("card-open");
let closeButton = document.getElementsByClassName("close-button");
let body = document.getElementsByTagName("body")[0];
let navHeight = document.getElementsByTagName("nav")[0].scrollHeight;
let nav = document.getElementsByClassName("side-menu")[0];
nav.style.top = navHeight;
nav.style.transform = "translateX("+nav.scrollWidth+")";
document.getElementsByTagName("header")[0].style.margin = navHeight + "px 0 0 0";

let identifier = 0;

for (let j = 0; j < card.length; j++) {
    card[j].id = identifier;
    cardButton[j+1].id = identifier; // +1 is due to the display button (don't want it to activate anything)
    cardButton[j+1].addEventListener("click", function() {openCard(j, true)});
    cardOpen[j].id = identifier;
    cardOpen[j].style.top = navHeight;
    closeButton[j].id = identifier;
    closeButton[j].addEventListener("click", function() {openCard(j, false)})
    identifier += 1;
}

function openCard(id, action) {
    if (action == true) {
        cardOpen[id].style.display = "block";
        setTimeout(function() {cardOpen[id].style.transform = "translateY(0)";}, 11)
        body.style.overflow = "hidden";
    } else {
        body.style.overflow = "visible";
        cardOpen[id].style.transform = "translateY(100%)";
        setTimeout(function() {cardOpen[id].style.display = "none";}, 400);
    }
}

let menuBtn = document.getElementsByClassName("menu-btn")[0];
menuBtn.addEventListener("click", function() {
    if (nav.classList.contains("deployed")) {
        openNav(false);
    } else {
        openNav(true);
    }
})

let timeoutHandle = null;

function openNav(action) {
    let navWidth = nav.scrollWidth;
    window.clearTimeout(timeoutHandle);
    if (action == true) {
        nav.style.display = "flex";
        setTimeout(function() {nav.style.transform = "translateX(0)";}, 11)
        nav.classList.add("deployed");
    } else {
        nav.style.transform = "translateX(-"+ navWidth +"px)";
        timeoutHandle = setTimeout(function() {nav.style.display = "none";}, 400);
        nav.classList.remove("deployed");
    }
}
:root {
    --accent-color: #4888f1;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    line-height: 1;
    font-family: "Product Sans", sans-serif;
}

body {
    margin: 0;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 32px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

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

ul {
    list-style-position: inside;
    margin: 0 0 0 16px;
}

li {
    margin: 8px 0 0 0;
}

/* NAVIGATOIN */

nav {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    background-color: #fff;
    width: 100%;
    padding: 20px 26px;
    z-index: 2;
}

nav > *:not(:first-child) {
    margin: 0 0 0 16px;
}

.menu-btn {
    fill: rgba(0,0,0,0.54);
    color: rgba(0,0,0,0.54);
    width: 24px;
    cursor: pointer;
}

.side-menu {
    position: fixed;
    flex-direction: column;
    background-color: #fff;
    left: 0;
    height: 100%;
    min-width: 17.5%;
    width: auto;
    padding: 0 16px;
    z-index: 2;
    display: none;
    transform: translateX(-224px);
    transition: 400ms transform;
    will-change: transform;
}

.logo {
    height: 28px;
}

.side-menu a {
    color: #444;
    margin: 0 -16px;
    font-size: 18px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 8px 16px;
}

.side-menu a.active {
    width: 100%;
    color: var(--accent-color);
    background-color: rgba(72,136,241, 0.3);
}

/* HEADER */

header {
    margin: 0;
    height: 60vh;
    min-height: 350px;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("https://source.unsplash.com/_JedZkjoUFw/2560x1600");
    background-size: cover;
    background-position: center;
}

header > * {
    margin: 16px 0 0 0;
    text-align: center;
    color: white;
}

/* CONTENT */

.content {
    margin: 16px;
}

.content > *:not(:first-child) {
    margin: 16px 0 0 0;
}

/* DISPLAY GRID */

.display {
    display: flex;
    flex-wrap: wrap;
}

.display > *:not(:first-child) {
    margin: 0 0 0 16px;
}

/* BUTTON */

button {
    background-color: var(--accent-color);
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 0;
    border: 0;
    margin: 0;
    padding: 10px 22px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

button .ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple 0.25s linear;
}

@keyframes ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

button img {
    width: 20px;
    height: 20px;
}

/* button.image-only {
    width: 40px;
    padding: 0;
} */

button * {
    user-select: none;
    font-weight: bold;
}

button *:not(:first-child) {
    margin: 0 0 0 8px;
}

button span {
    color: #fff;
}

@media screen and (min-width: 1280px) {
    .store-button {
        padding: 0.8vw 1.75vw;
        border-radius: 1.9vw;
    } .store-button img {
        width: 1.55vw;
        height: auto;
    } button span {
        font-size: 0.85vw;
    }
}

/* CARD */

.card-display {
    display: grid;
    grid-template-columns: repeat(3, minmax(350px, 1fr));
    grid-gap: 16px;
}

.card-display > *:not(:first-child) {
    margin: 0;
}

@media screen and (max-width: 1114px) {
    .card-display {
        grid-template-columns: repeat(2, minmax(350px, 1fr));
    }
}

@media screen and (max-width: 748px) {
    .card-display {
        grid-template-columns: repeat(1, minmax(350px, 1fr));
    }
}

.card {
    min-height: 250px;
    width: 100%;
    /* width: calc((100% - 32px) / 3); */
    /* min-width: 350px; */
    box-shadow: 1px 1px 8px #888888;
}

.card-image {
    position: relative;
    height: 60%;
    max-height: 24vh;
}

.card-image h1 {
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-weight: normal;
    font-size: 24px;
    color: #fff;
}

.card-image img {
    object-fit: cover;
    height: 100%;
    max-height: 24vh; /* For firefox, fixs bug */
    width: 100%;
}

.card-content {
    margin: 12px;
}

.card-content p {
    font-size: 16px;
    color: #666;
    margin: 0 0 12px 0;
    box-sizing: content-box;
}

.card-button-container {
    margin: 0 -12px;
    padding: 0 12px;
    border-top: 1px solid #E0E0E0;
}

.card-button {
    margin: 12px 0 0 0;
    border-radius: 0;
    background-color: transparent;
    padding: 10px 12px;
}

.card-button span {
    color: var(--accent-color);
    font-size: 12px;
}

.card-button .ripple {
    background-color: rgba(0, 0, 0, 0.3);
}

.card-open {
    position: fixed;
    width: 100%;
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
    z-index: 1;
    background-color: #fff;
    padding: 0 64px 32px 64px;
    overflow: auto;
    /* transition: 500ms top; */
    transition: 400ms transform;
    will-change: transform;
}

.card-open-header {
    height: 45vh;
    margin: 0 -64px 32px -64px;
    position: relative;
}

.card-open-header h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 64px;
    color: #fff;
}

.card-open-header .close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    filter: invert(1);
}

.card-open-header .header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-open-content > *:not(:first-child):not(.card-image-display) {
    margin: 16px 0 0 0;
}

.card-open-content h1 {
    font-size: 32px;
}

.card-open-content p {
    color: black;
}

.card-image-display {
    display: flex;
    margin: 32px 0 16px 0;
}

.card-image-display > *:not(:first-child) {
    margin: 0 0 0 16px;
}

.card-image-display img {
    width: calc((100% - 32px) / 3);
    height: 40vh;
    object-fit: cover;
}

@media screen and (max-width: 1000px) {
    .card-open {
        padding: 0 32px;
    } .card-open-header {
        margin: 0 -32px 32px -32px;
    } 
}

@media screen and (max-width: 700px) {
    .card-open {
        padding: 0 16px;
    } .card-open-header {
        margin: 0 -16px 32px -16px;
    } .card-image-display {
        flex-direction: column;
    } .card-image-display img {
        width: 100%;
    } .card-image-display > *:not(:first-child) {
        margin: 16px 0 0 0;
    }
}
<html>
    <head>
        <title>Material Design Components</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Product+Sans%3A100%2C100i%2C300%2C300i%2C400%2C400i%2C500%2C500i%2C700%2C700i%2C900%2C900i">
    </head>
    <body>
        <nav>
            <img class="menu-btn" src="menu.png" alt="">
            <img class="logo" src="google.png" alt="">
        </nav>
        <div class="side-menu">
            <a class="active" href="">Learn More</a>
            <a href="">Link 1</a>
            <a class="active" href="">This is a long long long long long link</a>
            <a href="">!@#$%^&*()</a>
            <a href="">Wow</a>
        </div>
        <header>
            <h1>Material Design Components</h1>
            <p>Work in progress.</p>
        </header>
        <div class="content">
            <h2>Things to Do:</h2>
            <ul>
                <li>Menus</li>
                <ul>
                    <li>Share</li>
                    <li>Three Dot</li>
                </ul>
                <li>Lightbox</li>
            </ul>
            <h2>Buttons</h2>
            <div class="display">
                <button class="store-button">
                    <img src="cart.png" alt="">
                    <span>Add to Cart</span>
                </button>
                <button>
                    <span>Learn more</span>
                </button>
                <button class="image-only">
                    <img src="cart.png" alt="">
                </button>
                <button class="card-button">
                    <span>READ MORE</span>
                </button>
            </div>
            <h2>Menus</h2>
            <h2>Card UI</h2>
            <div class="display card-display">
                <div class="card">
                    <div class="card-image">
                        <img src="https://source.unsplash.com/random/sig1" alt="">
                        <h1>October</h1>
                    </div>
                    <div class="card-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...</p>
                        <div class="card-button-container">
                            <button class="card-button">
                                <span>READ MORE</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-open">
                    <div class="card-open-header">
                        <img class="close-button"src="close.png" alt="">
                        <img class="header-image" src="https://source.unsplash.com/random/sig2" alt="">
                        <h1>October</h1>
                    </div>
                    <div class="card-open-content">
                        <h1>Why is October the best month?</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...</p>
                        <div class="card-image-display">
                            <img src="https://source.unsplash.com/random/sig3" alt="">
                            <img src="https://source.unsplash.com/random/sig4" alt="">
                            <img src="https://source.unsplash.com/random/sig5" alt="">
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-image">
                        <img src="https://source.unsplash.com/random/sig6" alt="">
                        <h1>March</h1>
                    </div>
                    <div class="card-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...</p>
                        <div class="card-button-container">
                            <button class="card-button">
                                <span>READ MORE</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-open">
                    <div class="card-open-header">
                        <img class="close-button"src="close.png" alt="">
                        <img class="header-image" src="https://source.unsplash.com/random/sig7" alt="">
                        <h1>March</h1>
                    </div>
                    <div class="card-open-content">
                        <h1>Why is March the best month?</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...</p>
                        <div class="card-image-display">
                            <img src="https://source.unsplash.com/random/sig8" alt="">
                            <img src="https://source.unsplash.com/random/sig9" alt="">
                            <img src="https://source.unsplash.com/random/sig10" alt="">
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-image">
                        <img src="https://source.unsplash.com/random/sig11" alt="">
                        <h1>November</h1>
                    </div>
                    <div class="card-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...</p>
                        <div class="card-button-container">
                            <button class="card-button">
                                <span>READ MORE</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-open">
                    <div class="card-open-header">
                        <img class="close-button"src="close.png" alt="">
                        <img class="header-image" src="https://source.unsplash.com/random/sig12" alt="">
                        <h1>November</h1>
                    </div>
                    <div class="card-open-content">
                        <h1>Why is November the best month?</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...</p>
                        <div class="card-image-display">
                            <img src="https://source.unsplash.com/random/sig13" alt="">
                            <img src="https://source.unsplash.com/random/sig14" alt="">
                            <img src="https://source.unsplash.com/random/sig15" alt="">
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-image">
                        <img src="https://source.unsplash.com/random/sig16" alt="">
                        <h1>July</h1>
                    </div>
                    <div class="card-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...</p>
                        <div class="card-button-container">
                            <button class="card-button">
                                <span>READ MORE</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-open">
                    <div class="card-open-header">
                        <img class="close-button"src="close.png" alt="">
                        <img class="header-image" src="https://source.unsplash.com/random/sig17" alt="">
                        <h1>July</h1>
                    </div>
                    <div class="card-open-content">
                        <h1>Why is July the best month?</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...</p>
                        <div class="card-image-display">
                            <img src="https://source.unsplash.com/random/sig19" alt="">
                            <img src="https://source.unsplash.com/random/sig120" alt="">
                            <img src="https://source.unsplash.com/random/sig121" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js.js"></script>
    </body>
</html>
...