Скопировать ссылку Javascript Код с CSS Эффектом перехода - PullRequest
Новая
       0

Скопировать ссылку Javascript Код с CSS Эффектом перехода

2 голосов
/ 01 марта 2020

Эффект перехода не работает при первом нажатии - что не так?

Я хотел бы попросить экспертов JavaScript / CSS оптимизировать и минимизировать код, который может поддерживать все браузеры. 

        const div = document.getElementsByClassName('share')[0];
        const shareNotice = document.getElementById('share-notice');

        div.onclick = () => {
            window
                .navigator
                .clipboard
                .writeText(window.location.href);

            shareNotice.style.visibility = 'visible';
            shareNotice.style.opacity = '1';

            window.setTimeout(() => shareNotice.style.visibility = 'hidden', 1000);
            window.setTimeout(() => shareNotice.style.opacity = '0', 1000);
        };
        .share {
		
		}
		.cpm, #share-notice
		{
            background-image: url(link.png);
            background-repeat: no-repeat;
            background-size: 16px;
			background-position: left center;
			border-radius: 3px;
            padding: 5px 5px 5px 20px;
			cursor:pointer;
			transition: visibility 1s, opacity 1s;
        }
        
        .cpm {
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
        }
        
        #share-notice {
            visibility: hidden;
            position: absolute;
            background-color: wheat;
            border: 1px solid #ccc;
        }
<!DOCTYPE html>
<html>

<body>

    <div class="share">
        <span class="cpm">Copy Link</span>
        <span id="share-notice">Link Copied!</span>
    </div>

</body>

</html>

Этот код, вероятно, самый короткий рабочий пример, который я могу найти. Но есть одна проблема со следующим кодом: CSS эффект перехода не работает должным образом, когда вы впервые нажимаете на текст «Копировать ссылку».

Ответы [ 2 ]

1 голос
/ 01 марта 2020

Установка свойства opacity по умолчанию в вашем CSS решит первый стиль сглаживания вашего уведомления. 

const div = document.getElementsByClassName('share')[0];
const shareNotice = document.getElementById('share-notice');

div.onclick = () => {
  window
    .navigator
    .clipboard
    .writeText(window.location.href);

  shareNotice.style.visibility = 'visible';
  shareNotice.style.opacity = '1';

  window.setTimeout(() => shareNotice.style.visibility = 'hidden', 1000);
  window.setTimeout(() => shareNotice.style.opacity = '0', 1000);
};
.share {}

.cpm,
#share-notice {
  background-image: url(link.png);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: left center;
  border-radius: 3px;
  padding: 5px 5px 5px 20px;
  cursor: pointer;
  transition: visibility 1s, opacity 1s;
}

.cpm {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
}

#share-notice {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: wheat;
  border: 1px solid #ccc;
}
<!DOCTYPE html>
<html>

<body>

  <div class="share">
    <span class="cpm">Copy Link</span>
    <span id="share-notice">Link Copied!</span>
  </div>

</body>

</html>

Однако встроенные стили могут быть сложными для работы, и ваши HTML строки CSS будут сложными. Вместо этого добавляйте и удаляйте класс при изменении стилей элемента. Это удерживает ваши HTML и CSS врозь и по-прежнему дает вам силу, которой обладает CSS. 

const div = document.getElementsByClassName('share')[0];
const shareNotice = document.getElementById('share-notice');

div.onclick = () => {
  window
    .navigator
    .clipboard
    .writeText(window.location.href);

  shareNotice.classList.add('visible');
  setTimeout(() => shareNotice.classList.remove('visible'), 1000);
};
.share {}

.cpm,
#share-notice {
  background-image: url(link.png);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: left center;
  border-radius: 3px;
  padding: 5px 5px 5px 20px;
  cursor: pointer;
  transition: visibility 1s, opacity 1s;
}

.cpm {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
}

#share-notice {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: wheat;
  border: 1px solid #ccc;
}

#share-notice.visible {
  visibility: visible;
  opacity: 1;
}
<!DOCTYPE html>
<html>

<body>

  <div class="share">
    <span class="cpm">Copy Link</span>
    <span id="share-notice">Link Copied!</span>
  </div>

</body>

</html>

Проверьте Babel , чтобы сделать ваш JavaScript совместимым со старыми браузерами и минимизировать их.

0 голосов
/ 01 марта 2020

Попробуйте сделать это с помощью прослушивателя событий 

var classname = document.getElementsByClassName("share");
    classname[0].addEventListener('click', myFunction, false);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...