javascript - CSS/Javascript - fadeIn 效果在 Safari 上不起作用-6ren

javascript - CSS/Javascript - fadeIn 效果在 Safari 上不起作用

转载作者：行者123 更新时间：2023-12-01 05:18:48

24

4

我正在将一个前端站点加载到 Wordpress 上，并加载了一些 javascript 文件，其中一个文件用于主页上各部分的淡入效果。它在 Firefox 和 Chrome 上运行良好，但在 Safari 中不起作用，我不知道为什么。基本上，opacity: 0; 规则保留在 Safari 中，因此当我向下滚动时，我只会看到底部带有页脚的空白页面。

浏览器中没有任何真正的标记，所以我有点卡住了。

这是代码 -

FadeIn.js

jQuery(document).on("scroll", function () {
  var pageTop = jQuery(document).scrollTop()
  var pageBottom = pageTop + jQuery(window).height()
  var tags = jQuery("section")

  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i]

    if (jQuery(tag).position().top < pageBottom) {
      jQuery(tag).addClass("visible")
    } else {
      jQuery(tag).removeClass("visible")
    }
  }
})

  // Have put jQuery instead of $ due to error flagging up in Wordpress

样式.css

/* Fade in/out */

section {
  opacity: 0;

  transform: translate(0, 10px); 
  transition: all 1s;
}

section.visible { 
  opacity: 1;
  transform: translate(0, 0); 
}


/*  ---------------------- */

functions.php

function html5blankchild_all_scriptsandstyles() {
//Load JS and CSS files in here
  wp_register_script ('jquery', get_stylesheet_directory_uri() . 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
  wp_register_script ('smooth-scroll', get_stylesheet_directory_uri() . '/js/smooth-scroll.js', array('jquery'));
  wp_register_script ('fadein', get_stylesheet_directory_uri() . '/js/fadein.js', array('jquery'));
  wp_register_script ('ps', get_stylesheet_directory_uri() . '/js/ps.js',true);
  wp_register_style ('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
  wp_register_style ('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');
  wp_register_style ('normalize', 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css');
  wp_register_style ('style', get_stylesheet_directory_uri() . '/style.css');

  wp_enqueue_script('jquery');
  wp_enqueue_script('ps');
  wp_enqueue_style( 'font-awesome');
  wp_enqueue_style( 'bootstrap');
  wp_enqueue_style( 'normalize');
  wp_enqueue_style( 'style');
  if ( is_front_page() ) {
  wp_enqueue_script('fadein');
  }
  if ( is_front_page() ) {
  wp_enqueue_script('smooth-scroll');
  }

}
add_action( 'wp_enqueue_scripts', 'html5blankchild_all_scriptsandstyles' );

更新 -

header.php

<head><!-- head code goes here --><?head> 
<body <?php ?>>

        <header>
        <nav>
            <a href="<?php the_permalink(4); ?>#particle-slider">Home</a>
            <a href="#what">What we do</a>
            <a href="#who">Who we are</a>
            <a href="#partners">Who we work with</a>
            <a href="#contact">Say hello</a>
            <a href="<?php the_permalink(70); ?>">Blog</a>
        </nav>
    </header>

Contact.php

<?php /* Template Name: contact */ ?>
<!-- contact template -->

        <section id="contact">
            <div class="container-fluid">
                     <div class="secthead"><span style="color: rgb(63,190,150);">&#43;</span><h1>Say hello</h1></div>
                        <div class="row no-gutters">
                            <div id="hello">        
                                <p>If you would like to receive a quote for a design project, chat about the weather or send us some chocolates, please pop an email in our inbox, call us or write
                                us an old fashioned letter on the below contact details</p> 
                            </div>
                        </div>  
            </div>          
        </section>
<!-- contact template -->

最佳答案

对于 safari 使用 webkit

section {
  opacity: 0;
  -webkit-transform: translate(0, 10px); 
  -webkit-transition: all 1s;
  transform: translate(0, 10px); 
  transition: all 1s;
}

section.visible { 
  opacity: 1;
  -webkit-transform: translate(0, 0); 
  transform: translate(0, 0); 
}

关于javascript - CSS/Javascript - fadeIn 效果在 Safari 上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46849503/

24

4

0

文章推荐： python - ArgumentParser 选择两个选项之一

文章推荐： python - 如何将列表的范围存储为变量？

safari - Safari 和 Mobile Safari 是否会错误地渲染带有半径和填充的圆形边框？
Safari 和 Mobile Safari 在组合边框半径、填充和边框时似乎有问题。在 Chrome 和 Firefox 中运行良好。 CSS: img { width: 200px;
safari - Safari 开发工具中的断点自动启用
每次我在打开 Safari 开发工具的情况下加载页面(无论是哪个选项卡)时，都会触发一些断点，并且我会被重定向到“源代码”选项卡，并显示消息“调试器已暂停”。问题是我没有设置任何断点，至少是有意的，这
safari - Safari 中过渡期间的不透明度变化闪烁
我有一个复合 div(它有 translate3d)和一个 opacity过渡: #bad { background-color: red; -webkit-transition: o
safari - Safari 的阅读器功能如何工作？
我想为我正在制作的工具添加一个类似的功能。我对它在代码方面的工作方式很感兴趣。我希望能够获得一个 html 页面并排除除文章之外的所有内容。最佳答案 Readability 项目对 chrome 和
safari - Safari 中的跨源资源共享策略拒绝跨源重定向
我们有一个重定向到另一台服务器的 API 端点。它是通过 XHR 调用的，似乎在大多数浏览器中都能正常工作，除了 Safari(特别是在 iOS 上)。我在控制台中遇到的错误是:跨源重定向被跨源资源
safari - Safari 中的页面转换效果？
如何在 Safari 中为网页添加 IE 等页面转换效果？最佳答案你可以看看这个例子:http://sachiniscool.blogspot.com/2006/01/implementing-p
safari - 边界半径不适用于 safari
所以我用拇指和周围的白色边框制作了这个圆圈。一切都在每个浏览器中都能找到，除了 safari，它不会按应有的方式呈现白色边框。那我怎样才能让它工作呢？示例 http://jsfiddle.net/v
safari - safari 中导航的行高与其他浏览器不同
我找遍了这个问题的解决方案，但似乎没有任何效果，如果可以避免的话，我真的不想使用 hack。当我将 line-height 设置为垂直居中时，我的导航栏在任何地方都居中，但在 safari 中，它的
safari - 从输入中删除 Safari 联系人下拉列表
在输入字段中输入时，safari 会创建一个基于下拉列表的联系人。我不知道如何隐藏这个下拉菜单。我可以隐藏联系人按钮。我正在运行 Safari 版本 11.0.1 重现 fiddle : https
safari - 我需要一个苹果脚本来全屏打开 safari 并隐藏小牛上的工具栏
我需要一个苹果脚本来全屏打开 safari 并隐藏小牛上的工具栏。这听起来很容易，但事实并非如此! 我需要打开 safari，然后以全屏模式打开谷歌，然后隐藏工具栏。这将是以下示例的等效项，但对于
safari-extension - Safari 无法安装此扩展程序
嗨， friend 们，我开发了一个 safari 扩展并且也能够构建它。但是当我尝试安装它时，会出现以下错误: “Safari 无法安装此扩展程序。安装此扩展程序时出错” 我有一个有效的 Safa
safari - 从扩展代码本身读取 Safari 扩展版本
我想将使用的扩展版本报告给服务。有没有办法从扩展中读取扩展版本号？最佳答案您可以使用 displayVersion 访问该版本SafariExtension 的属性(property)类(cla
safari - 以编程方式更改 Safari 浏览器扩展的图标？
我有一个禁用模式的 Safari 浏览器扩展。我想做的是在用户进入禁用模式时以编程方式更改工具栏图标。是否有一个 API 可以让我实现这一点，如果有，它是什么？最佳答案您的扩展程序拥有的任何工具
safari - 如何关闭 Safari 的预取功能？
Safari 有一项“功能”，可以在您输入网址时预加载页面。现在对于大多数用户来说，这确实是一项功能，可以加快页面加载速度。但是对于 Web 开发人员来说，它可能会带来麻烦 - 特别是当它自动加载您
safari - 基本身份验证在 Safari 中不起作用
我们有一个正在开发中的 PHP Web 应用程序，它不应该被公众访问(但)，但我们不想实现自定义解决方案来防止这种情况发生，因此我们求助于 HTTP 基本身份验证，它通常工作正常但有是 iPhone
safari - 在 Safari 中查看本地存储中长值的内容
我正在尝试查看 Safari 本地存储中保存的单个值的全部内容(它是一个长 JSON 对象)。当我查看键/值对时，该值对于屏幕来说太长了，复制该行只会复制该值的可见部分。有没有办法看到整条线？最佳答
safari - 在 Safari 中禁用同源策略
出于开发目的，我需要在我的计算机上的 Safari(Windows 上)中禁用同源策略。在 Chrome 中，这可以通过使用标志 --disable-web-security 启动来完成。 Safa
safari - 如何使用 Safari 浏览器检查元素
我正在开发网站并创建应用程序。我想知道如何通过 safari 等网络浏览器检查元素。在普通的 Chrome、Firefox、Explorer 或任何其他浏览器中，我们将右键单击鼠标按钮或按功能键 F
safari - Safari Web 浏览器是开源项目吗？
我有兴趣针对 Safari 浏览器进行一些开发，但我不确定它是否是开源项目？我知道 webkit 是开源的，但这并不意味着浏览器是开源的。我已经给苹果发了电子邮件，但他们的回复不是很及时，所以我想知
safari - 为什么 Safari 无法连接到本地主机？
我有一个正确的/etc/hosts 文件，其中包含以下内容: 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 l

首页

博学

6Ren·AI

商城

javascript - CSS/Javascript - fadeIn 效果在 Safari 上不起作用