Copy Link Javascript Code with CSS Transition Effect

user_7467375 0
Viewed 193

The transition effect does not work on first click - what's wrong?

I would like to request JavaScript/CSS experts to optimize and minimize the code - that can support all browsers.

        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>

This code is probably shortest working example I can find. But there is one problem with the following code, CSS transition effect does not working properly, when you hit the "Copy Link" text first time.

css html javascript
2 Answers

Setting the opacity property by default in your CSS will solve the first glitching style of your notice. 

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>

However, inline styles can be tricky to work with and polutes your HTML with CSS lines. Add and remove a class instead when changing styles on an element. This keeps your HTML and CSS apart and still gives you the power that CSS has.

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>

Check out Babel to make your JavaScript compatible with older browsers and to minify them.

user_116196470

Try doing this using an event listener 

var classname = document.getElementsByClassName("share");
    classname[0].addEventListener('click', myFunction, false);
user_37822580
Related