javascript - 单击按钮时如何使元素出现和动画

Question

我目前有一个我正在使用的小共享按钮，并且我试图制作它，以便当单击复制链接按钮时，它不仅会复制所有工作的“预设”链接，而且还会使新元素出现这将接管整个盒子并提供成功消息。

我在下面附上了当前的 HTML 和 CSS，正如您将鼠标悬停在主按钮上时看到的那样，它会移动到侧面以显示第二组按钮，我希望对成功消息具有相同的动画效果，但是简单的蓝色背景取代了带有简单白色文本的按钮。

我还附上了我想要的结果的屏幕记录，但在 Photoshop 中包含静止元素。

HTML、CSS 和 Javascript：

< script >
  function fallbackCopyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed"; //avoid scrolling to bottom
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Fallback: Copying text command was ' + msg);
    } catch (err) {
      console.error('Fallback: Oops, unable to copy', err);
    }

    document.body.removeChild(textArea);
  }

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('https://www.youtube.com');
});

<
/script>

/* ===========================================================================================================
											START OF RESET									
==============================================================================================================*/


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ===========================================================================================================
												END OF RESET 									
==============================================================================================================*/

body {
  margin: 0;
  padding: 0;
  font-family: "montserrat", sans-serif;
  background: transparent;
  display: flex;
  height: 100vh;
}


/* ===========================================================================================================
							button after reveal settings - with social media icons  									
==============================================================================================================*/

.share-button {
  width: 320px;
  height: 80px;
  background: #dfe6e9;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: .3s linear;
}


/* ===========================================================================================================
									button before reveal - with share icon 									
==============================================================================================================*/

.share-button span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #2d3436;
  color: #f1f1f1;
  text-align: center;
  line-height: 80px;
  z-index: 999;
  transition: .6s linear;
  border-radius: 40px;
}


/* ===========================================================================================================
									move top layer button when hovered							
==============================================================================================================*/

.share-button:hover span {
  transform: translateX(-100%);
  transition-delay: .3s;
}


/* ===========================================================================================================
									social media icons - standard form							
==============================================================================================================*/

.share-button a {
  flex: 1;
  font-size: 26px;
  color: #2d3436;
  text-align: center;
  transform: translateX(-100%);
  opacity: 0;
  transition: 0.3s linear;
}


/* ===========================================================================================================
											share button on hover									
==============================================================================================================*/

.share-button:hover a {
  opacity: 1;
  transform: translateX(0);
}


/* ===========================================================================================================
										social media button animations									
==============================================================================================================*/


/* ===========================================================================================================
													facebook									
==============================================================================================================*/

.share-button a:nth-of-type(1) {
  transition-delay: 1s;
}


/* ===========================================================================================================
													twitter									
==============================================================================================================*/

.share-button a:nth-of-type(2) {
  transition-delay: 0.8s;
}


/* ===========================================================================================================
													instagram								
==============================================================================================================*/

.share-button a:nth-of-type(3) {
  transition-delay: 0.6s;
}


/* ===========================================================================================================
													linkedin									
==============================================================================================================*/

.share-button a:nth-of-type(4) {
  transition-delay: 0.4s;
}


/* ===========================================================================================================
													COPY LINK									
==============================================================================================================*/

.share-button a:nth-of-type(5) {
  transition-delay: 0.4s;
}


/* ===========================================================================================================
									social media icons on hover - all icons								
==============================================================================================================*/

.share-button a:nth-of-type(1):hover,
.share-button a:nth-of-type(2):hover,
.share-button a:nth-of-type(3):hover,
.share-button a:nth-of-type(4):hover,
.share-button a:nth-of-type(5):hover {
  color: #55b1cf;
  transition-delay: 0.1s;
}


/* ===========================================================================================================
										BROWERS COMPATABILITY									
==============================================================================================================*/

.share-button a:nth-of-type(1):hover,
.share-button a:nth-of-type(2):hover,
.share-button a:nth-of-type(3):hover,
.share-button a:nth-of-type(4):hover {
  -webkit-transition: color .1s ease-in-out;
  -moz-transition: color .1s ease-in-out;
  -o-transition: color .1s ease-in-out;
  transition: color .1s ease-in-out;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>

<body>
  <div class="share-button">
    <span><i class="fas fa-share-alt"></i> Share!</span>
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-linkedin-in"></i></a>
    <a href="#"><i class="fas fa-link js-copy-bob-btn"></i></a>
  </div>

</body>

</html>

标签： javascripthtmlcss