Question

我得到了这个css：

#pop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.8);
        z-index: 10;
        display: none;
        }

到目前为止，为了展示这个#pop div，我使用了$("#pop").show(450); 我怎么能用css“廉价”做到这一点？我想保持$ .show（ms）提供的相同淡入效果，而不仅仅是显示它。

Answer 1

你可以在元素上创建动画和切换类：

$('#pop').addClass('show');

你需要这样的css：

 #pop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.8);
  z-index: 10;
  display: block;
  visibility: hidden;
  opacity: 0;
}
#pop.show {
  visibility: visible;
  opacity: 1;
  transition: 1.45s all;
}

据我所知，显示属性不支持转换，因此您需要使用不透明度。您可以将两个类放在同一个元素上，以模拟元素在页面加载时变得可见。

这里用小提琴更新，你需要使用visibility属性： https://fiddle.jshell.net/6jwfz608/

Answer 2

您可以使用JS来使用“className”切换类，并在CSS

中使用transition

CSS

.pop_hidden {
    transition:all 450ms;

    position: absolute;
    top: 0;
    left: -101vw;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    z-index: 10;
    display: none;
}
.pop_shown {
        transition:all 450ms;

        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.8);
        z-index: 10;
        display: none;
    }

（css编辑）我摆脱了显示并将其更改为将div移出框架向右移动。

JS

document.getElementById('pop').className = 'pop_hidden';//to load the hidden div you can use id too
setTimeout(() => {
     document.getElementById('pop').className = 'pop_shown';
}, 20);///adjustable delay if needed(ex: set to var in game loop)

编辑：我对使用CSS过渡和设置classNames的看法。这很简单有趣。对于淡入淡出效果，切换不透明度。对于和滑动效果，切换位置，有很多创造性的方法来改变你的元素。由于类的命名完全是任意的，因此您可以切换到多个类。另外，我把它改为习惯上的课（SORRY）。但是没关系，你可以用同样的方式切换id。

Answer 3

这是一个显示onclick功能并使用Vanilla Javascript和Jquery处理的示例，因为你想要的东西不那么重要。

document.getElementById('showBill').addEventListener('click', function () {
  var bill = document.getElementById('bill');
  if (bill.classList.contains('hide')) {
   bill.classList.remove('hide');
  } else {
   bill.classList.add('hide');
  }
});

img {
   opacity: 1;
   transition: opacity 3s ease-in-out;
   -moz-transition: opacity 3s ease-in-out;
   -webkit-transition: opacity 3s ease-in-out;
}
img.hide {
  opacity: 0;
}

<button id='showBill'>Show Bill</button>
<br/>
<img src='http://fillmurray.com/300/300' class='hide' id='bill' />

将$ .show（）转换为css

3 个答案: