Question

我使用CSS-tricks的这种滑入效果。它部分使用可见插件，动画通过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()将外部样式表排入队列，并确保挂钩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

CSS加载页内样式标记，但不是外部样式表

1 个答案: