javascript - 页面内样式标签内的 CSS 加载，但不从外部样式表加载

Question

我正在使用 CSS 技巧中的这种滑入效果。部分使用visible插件，动画通过CSS实现。

http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

当 CSS 在页面内加载样式标签时它起作用，但是当我从外部样式表加载它时它不起作用。我已经检查过样式表是否正在加载，确实如此。我想从外部加载它以将我的 CSS 保存在一个文件中。我试过让它在 HTML 和 wordpress 中工作，但得到相同的结果。我使用 HTML5 重置文件。谢谢，蒂姆。

我试过在样式标签中使用:@import url("slidein.css"); 但没有用。

在 Wordpress 中，我在外部文件中加载 javascript，即。

<script src="<?php echo get_template_directory_uri(); ?>/js/index.js"></script>

在 HTML 中:

<script src="js/index.js"></script>

Wordpress 中的 CSS:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/slidein.css" />

和 HTML:

<link rel="stylesheet" type="text/css "href="assets/css/slidein.css" />

index.js 中的 javascript:

$.fn.offScreen = function(distance){

        var $t              = $(this),
            $w              = $(window),
            viewTop         = $w.scrollTop(),
            viewBottom      = viewTop + $w.height(),
            _top            = $t.offset().top - distance,
            _bottom     = $t.offset().top + $t.height() + distance;

   return {
     top: _bottom <= viewTop,
     bottom: _top >= viewBottom
   }

};

var win = $(window);

var allMods = $(".module");

allMods.each(function(i, el) {
  var el = $(el);
  if (!el.offScreen(150).bottom) {
    el.addClass("already-visible"); 
  } 
});

win.on("scroll resize",function(event) 
{

  allMods.each(function(i, el) {
    var el = $(el);
    if (!el.offScreen(150).top && !el.offScreen(150).bottom) 
    {
      el.removeClass("already-visible off-screen-top off-screen-bottom"); 
      el.addClass("come-in"); 
    } 
    else
    {

        if(el.offScreen(150).top)
        {
            el.addClass("off-screen-top"); 
        }
        else
        {
            el.addClass("off-screen-bottom"); 
        }
    }
  });//allMods.each()

});//win.scroll()

win.trigger("scroll");

CSS:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

section {
  background: #eee;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}

.module {
  width: 48%;
  min-height: 200px;
  background: white;
  position: relative;
  float: left;
  padding: 20px;
  margin-right: 4%;
  margin-bottom: 4%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform-origin: center center;
}
.module:nth-child(even) {
  margin-right: 0;
}
.module.off-screen-top {
  transform: translateY(-150px);
}
.module.off-screen-bottom {
  transform: translateY(150px);
}

body {
  background: url(http://s.cdpn.io/3/blurry-blue.jpg);
  background-size: cover;
  padding: 30px;
}

.come-in {
  transform: translateY(0);
  transition: transform 0.8s ease-out;
}

.come-in:nth-child(odd) {
  transition-duration: 0.5s;
}

.already-visible {
  transform: translateY(0);
  transition: none;
}
@keyframes come-in {
  to {
    transform: translateY(0);
  }
}

Answer 1

在 WordPress 中，您应该使用 wp_enqueue_style() 将您的外部样式表加入队列，确保 Hook 到 wp_enqueue_scripts。例如:

function my_enqueue_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

引用:http://codex.wordpress.org/Function_Reference/wp_enqueue_style