Question

我一直在使用我的随机报价生成器项目，我希望达到这样的效果：当我触摸移动设备上的按钮时，背景颜色变为半透明。这是我的代码。有一个按钮id =＆＃34; loadQuote＆＃34;

#loadQuote {
  position: fixed;
  width: 12em;
  display: inline-block;
  left: 50%;
  margin-left: -6em;
  bottom: 50px;
  border-radius: 4px;
  border: 2px solid #fff;
  color: #fff;
  background-color: black;
  padding: 10px 0;
  transition: .5s ;
}

#loadQuote:active {
  background-color: rgba(255,255,255,.25);
  -webkit-transition: background-color 10ms linear;
     -ms-transition: background-color 10ms linear;
     transition: background-color 10ms linear;
}

我在谷歌Chrome模拟器上尝试了这个并且它运行良好但是当我在我的iPhone上实际尝试它时它没有达到应有的效果。我想不出为什么。另一个奇怪的事情是，首先我设置转换应该发生的持续时间为1000毫秒，背景变化非常快，然后我将它们设置为10毫秒，因为在这种情况下，变化看起来非常缓慢和更明显。我想知道为什么，当持续时间更长时动画的持续时间不应该更长？

这是该项目的现场演示。 https://zhenghaohe.github.io/random-quote-generator/

谢谢！

Answer 1

有两个原因导致您的过渡不能一直有效：

a）您只在元素的:active状态上定义它们（因此它们仅在元素处于该状态时应用）。如果不是，它就不会过渡。并且

b）您不应该依赖移动设备上的:active。它建议你添加（和删除）一个类。因此，让我们在裸元素上设置转换（没有类），并使用类来控制开/关状态。

为了演示，我还添加了一些JavaScript，但如果你已经覆盖了它，请忽略它。

＆＃13;

let lQ = document.querySelector('#loadQuote');

lQ.addEventListener('click', activatelQ);
lQ.addEventListener('tap', activatelQ);

function activatelQ(){
  lQ.classList.add('active');
  deactivatelQ();
}

function deactivatelQ() {
  setTimeout(function(){
    lQ.classList.remove('active')
  },731)
}

＆＃13;

#loadQuote {
  position: fixed;
  width: 12em;
  display: inline-block;
  left: 50%;
  margin-left: -6em;
  bottom: 50px;
  border-radius: 4px;
  border: 2px solid #fff;
  color: #fff;
  background-color: black;
  padding: 10px 0;
  transition: background-color .5s linear;

  text-align: center;
  cursor: pointer;
}

#loadQuote.active {
  background-color: rgba(255,255,255,.25);
}

＆＃13;

<div id="loadQuote">Some quote</div>

＆＃13;

查看您的网站，我发现您正在使用jQuery。所以忽略上面的JavaScript并为你的jQuery制作以下mod：

将$('#loadQuote').click(generateQuote);替换为

 $('#loadQuote').on('click tap', function(){
   $(this).addClass('active');
   generateQuote()
 }

在renderQuote()功能中添加此行：

$('#loadQuote').removeClass('active');

另一方面，在将来，尝试在问题本身中创建mcve。答案者不应该查看您的网站以便回答。此外，您的网站将发生变化，使问题与未来用户无关。如果您不愿意帮助他人，通过保持相关问题，您自己不应该得到很多帮助。

如何在移动设备上实现按钮平滑背景转换？

1 个答案: