复制带有CSS转换效果的链接Javascript代码

第一次单击时过渡效果不起作用-怎么了

我想请JavaScript/CSS专家优化和最小化代码，这可以支持所有浏览器

const div=document.getElementsByClassName（'share'）[0]；
const shareNotice=document.getElementById（'share-notice'）；
div.onclick=（）=>{
窗口
.领航员
.剪贴板
.writeText（window.location.href）；
shareNotice.style.visibility='visible'；
shareNotice.style.opacity='1'；
setTimeout（（）=>shareNotice.style.visibility='hidden'，1000）；
setTimeout（（）=>shareNotice.style.opacity='0'，1000）；
};
.share{
}
.cpm，#共享通知
{
背景图片：url（link.png）；
背景重复：无重复；
背景尺寸：16px；
背景位置：左中；
边界半径：3px；
填充：5px 5px 5px 20px；
光标：指针；
过渡：能见度1s，不透明度1s；
}
.cpm{
位置：绝对位置；
背景色：白色；
边框：1px实心#ccc；
}
#股份通知{
可见性：隐藏；
位置：绝对位置；
背景色：小麦；
边框：1px实心#ccc；
}

复制链接
链接已复制！
尝试使用事件侦听器执行此操作

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


默认情况下，在CSS中设置
opacity
属性将解决通知的第一个错误样式。
const div=document.getElementsByClassName（'share'）[0]；
const shareNotice=document.getElementById（'share-notice'）；
div.onclick=（）=>{
窗口
.领航员
.剪贴板
.writeText（window.location.href）；
shareNotice.style.visibility='visible'；
shareNotice.style.opacity='1'；
setTimeout（（）=>shareNotice.style.visibility='hidden'，1000）；
setTimeout（（）=>shareNotice.style.opacity='0'，1000）；
};
.share{}
.cpm，
#股份通知{
背景图片：url（link.png）；
背景重复：无重复；
背景尺寸：16px；
背景位置：左中；
边界半径：3px；
填充：5px 5px 5px 20px；
光标：指针；
过渡：能见度1s，不透明度1s；
}
.cpm{
位置：绝对位置；
背景色：白色；
边框：1px实心#ccc；
}
#股份通知{
可见性：隐藏；
不透明度：0；
位置：绝对位置；
背景色：小麦；
边框：1px实心#ccc；
}

复制链接
链接已复制！