zoukankan      html  css  js  c++  java
  • transition页面加载触发问题解决方案

    css3   -   “艺术品”,让用户体验得到迅猛提升,例如今天咱们聊的这个transition属性。

    transition属性的详细概念就不再这里提及了,今天咱们研究一下transition给前端baby们带来的一个苦恼:

    用link导入外部css样式表:代码如下

    div{
        width:300px;
        height:300px;
        background:red;
        transform:rotate(90deg);
        /*过渡属性出现:从90deg开始过渡到下面的360deg*/
        transition:4s;
    }
    div:hover{
        transform:rotate(360deg);
    }
    /*
      运行结果描述:
      当前div会在页面第一次加载的时候触发transition过渡一次到90deg,不会直接显示为初始状态。
      这是由于link引入的css和html加载顺序的原因

    */

    问题解决方案如下:

      首先在body添加类名 transition_none,先禁用所有的transition过渡效果。以保证初始状态的直接渲染

        css设置如下 :

    .transition_none *{
        -webkit-transition:none!important;
        -moz-transition:none!important;
        -ms-transition:none!important;
        -o-transition:none!important;
        transition:none!important;
    }

      

      下面利用window.onload 等页面加载完毕去掉 transition_none类名,保证下面正常过渡交互。

    <script>
            let getBody =  document.querySelector('.transition_none');
            window.onload = function(){
                 getBody.className = '';
            }    
    </script>    

      

  • 相关阅读:
    Use Prerender to improve AngularJS SEO
    Prerender.io
    Prerender Application Level Middleware
    Prerender Application Level Middleware
    正则获取html标签字符串中图片地址
    xml转json
    videojs实现双击视频全屏播放、播放器全屏时视频未全屏
    自己编写jquery插件
    点击回退时需要点击2次才可返回js
    if中有逗号的写法
  • 原文地址:https://www.cnblogs.com/bruce-w/p/13553164.html
Copyright © 2011-2022 走看看