Peter Doodool Peter Doodool - 7 months ago 21
Javascript Question

Transform element does not work in Bootstrap

I wanted to make a simple transform transition animation using css and js so I coded this:

(test page)

<!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>


The problem is that this page is just a test page to see if the js and css transitions works properly or no and as you can see it works correctly but whenever I want to add these codes to my main site which uses Bootstrap ,it won't work. Here is my main site code source:

(main site)

<!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>


Notice that when I delete this line of code which connects the main site to Bootstrap css ,the transition/transform of the text works ...

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


So why the code does not work when I link Bootstrap css and when I delete it works properly?


I have inserted the styles of text transforms into a staggered file named 'fly-text.css'

The javascript part of test page is correctly place in main site

Answer

The issue is with the class .hidden. Line #6544 in boostrap.css (NOT minified version).

.hidden {
  display: none !important;
}

Remove it and everything should work fine.

Comments