Question

我正在构建chrome扩展，当用户点击按钮时，我正在从我的内容div加载自定义弹出窗口

/contentScript.js

var contentDiv = `
<div id='mydiv-container'>
   <div id="test"></div>
</div>`;

chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage (request, sender, sendResponse) {
$("body").append(contentDiv);
$('#mydiv-container').addClass('visible');
}

这是有效的，问题是我使用的css转换不起作用

/content.css

#mydiv-container {
    opacity: 0;
    height: 390px;
    width: 400px;
    position: fixed;
    top: -200px;
    z-index: 999999999;
    transition: all 2s;
}

#mydiv-container.visible {
  opacity: 1;
  top: 20px;
  transition: all 2s;
}

这并没有像预期的那样发挥作用，转变没有发生。我该如何解决这个问题。

Answer 1

使用此Webkit是Google Chrome支持的CSS的属性

-webkit-transition: all 2s;

Answer 2

我已经使用setTimeout方法解决了这个问题。

setTimeout(function() {
    $('#mydiv-container').addClass('visible');
});

Answer 3

使用Webkit为我工作，当我尝试在jsfiddle上复制代码时，因为mydivcontainer位于按钮顶部，所以按钮永远不会触发，所以我将top: -200px;更改为top: -400px

https://jsfiddle.net/jvgx4ucj/1/

css转换不适用于chrome扩展

3 个答案: