如何解决如何在 html css 和 js 中创建动画?
您好,我是一名新开发人员,正在尝试构建一个网站。网站的主要目标是向访问者提供一段文字。我的一些助手给了我一个 javascript 来复制 <p></p>
元素内的文本,并且它给出了文本被复制的自定义警报。但我需要一个动画/过渡,当我点击复制按钮时,自定义复制警报应该从左到右。
var buttons = document.getElementsByClassName('copystatus');
for (let button of buttons) {
button.addEventListener('click',function() {
let statusElement = this.closest('.latestatus');
let textTocopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;
copyTextToClipboard(textTocopy);
addcopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position="absolute";
copyText.style.display="none";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addcopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
copyAlertElement.classList.add('status-copy-alert')
let copyMessage = document.createTextNode('copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
setTimeout(function() {
element.removeChild(copyAlertElement);
},700);
}
}
<div class="mainStatus">
<h2 class="statusheading">Latest English Status</h2>
<div class="allStatus">
<div class="bock">
<div class="latestatus">
<p class="copytxt">Life is good when you have books</p>
<div>
<button class="copystatus btn">copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Google is an open source library by Larry Page and Sergey Brin!</p>
<div>
<button class="copystatus btn">copy</button>
</div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">copy</button>
</div>
</div>
</div>
</div>
</div>
自定义警报是由 JavaScript 创建的 <span>
。
比提前
解决方法
正如@A Haworth 在下面的评论中所建议的,是使用 css transformation 的代码片段。 我已将超时从 700 更新为 800,以使跨度保持更长的时间。
var buttons = document.getElementsByClassName('copystatus');
for (let button of buttons) {
button.addEventListener('click',function() {
let statusElement = this.closest('.latestatus');
let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;
copyTextToClipboard(textToCopy);
addCopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position = "absolute";
copyText.style.display = "none";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addCopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
let copyMessage = document.createTextNode('Copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
copyAlertElement.classList.add('status-copy-alert','slide-in');
setTimeout(function() {
element.removeChild(copyAlertElement);
},800);
}
}
.slide-in {
animation: slide-in 0.25s forwards;
-webkit-animation: slide-in 0.25s forwards;
}
@keyframes slide-in {
100% {
transform: translateX(0%);
}
}
@-webkit-keyframes slide-in {
100% {
-webkit-transform: translateX(0%);
}
}
.status-copy-alert {
position: absolute;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
left: 65px;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
.status-copy-alert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
transform: rotate(45deg);
top: 39%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="bock">
<div class="latestatus">
<p class="copytxt">Life is good when you have books</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Google is an open source library by Larry Page and Sergey Brin!</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。