Question

我想用css和js制作一个简单的变换过渡动画，所以我编码了这个：

（测试页）

    <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            *{
                margin:0;padding:0;
            }
            body{
                background-color:#000;
            }
            .fly-in-text{
                list-style:none;
                position:absolute;
                left:50%;
                top:50%;
                transform: translateX(-50%) translateY(-50%);
            }
            .fly-in-text li{
                display:inline-block;
                color: #d98c12;
                margin-right:50px;
                font-family:Open Sans,Arial;
                font-weight:300;
                font-size:4em;
                transition: all 2.5s ease;
            }
            .fly-in-text li:last-child{
                margin-right:0;
            }
            .fly-in-text.hidden li{
                opacity:0;
            }
            .fly-in-text.hidden li:nth-child(1){ transform: translateX(-200px) translateY(-200px); }
            .fly-in-text.hidden li:nth-child(2){ transform: translateX(20px) translateY(-20px); }
            .fly-in-text.hidden li:nth-child(3){ transform: translateX(-150px) translateY(-80px); }
            .fly-in-text.hidden li:nth-child(4){ transform: translateX(-150px) translateY(-200px); }
            .fly-in-text.hidden li:nth-child(5){ transform: translateX(10px) translateY(-200px); }
            .fly-in-text.hidden li:nth-child(6){ transform: translateX(-300px) translateY(200px); }
            .fly-in-text.hidden li:nth-child(7){ transform: translateX(20px) translateY(-20px); }
        </style>
    </head>
    <body>
        <ul class="fly-in-text hidden">
            <li>W</li>
            <li>E</li>
            <li>L</li>
            <li>C</li>
            <li>O</li>
            <li>M</li>
            <li>E</li>
        </ul>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                setTimeout(function(){
                    $('.fly-in-text').removeClass('hidden');
                },500);
            })();
        </script>
    </body>
</html>

问题是这个页面只是一个测试页面，看看js和css转换是否正常工作，或者你可以看到它正常工作，但每当我想将这些代码添加到使用Bootstrap的主站点时，它不会起作用。这是我的主要网站代码来源：

（主要网站）

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Daygostar Home Page</title>
    <!-- Bootstrap -->
    <link href="css/fly-text.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/menu.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="script.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body data-spy="scroll" data-target="#my-navbar">
  <div class="jumbotron">
        <div class="container text-center">
            <div class="header-text">
                <ul class="fly-in-text hidden">
                    <li>W</li>
                    <li>E</li>
                    <li>L</li>
                    <li>C</li>
                    <li>O</li>
                    <li>M</li>
                    <li>E</li>
                </ul>
            </div>
            <div class="btn-group">
                <a href="#"><img src="img/button1.png" width="300" height="300"/></a>
                <a href="#"><img src="img/button2.png" width="300" height="300"/></a>
            </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
            $(function(){
                setTimeout(function(){
                    $('.fly-in-text').removeClass('hidden');
                },500);
            })();
    </script>

请注意，当我删除将主站点连接到Bootstrap css的这行代码时，文本的转换/转换工作...

<link href="css/bootstrap.min.css" rel="stylesheet">

那么当我链接Bootstrap css时以及当我删除它时，代码无法正常工作？

我已将文本转换的样式插入到名为“fly-text.css”
的交错文件中
测试页面的javascript部分正确放置在主站点

Answer 1

您的动画可以使用带动画的纯css3制作，请参阅以下链接获取一些信息CSS3 Animations

Answer 2

也许您可以更改加载CSS文件的顺序或将bootstrap.min.css保留在页面末尾。

Answer 3

问题在于班级.hidden。 boostrap.css中的第6544行（非缩小版）。

.hidden {
  display: none !important;
}

删除它，一切都应该正常。

Transform元素在Bootstrap中不起作用

3 个答案: