这只是我拥有的一个项目的示例。基本上我需要
<script src='https://www.lowescdn.com/scaffold/1.2.0/js/scaffold.min.js'></script>
运行一个光滑的转盘。并且必须与其他脚本一起放在最后，否则它将无法正常工作。
在我放置此代码时，First Panel和Second Panel错误的动画没有过渡，但是当我删除脚本时，它可以正常工作。有什么主意吗？
https://codepen.io/jinzagon/pen/GRZNNaN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav" style="color:white;z-index:99999999;position:absolute;">
<a style="color:white;" href="#1" class="reveal-up" id='open'>First Panel</a>
<br>
<a style="color:white;" href="#2" class="reveal-up" id='close'>Second panel</a>
</div>
<div class="panel-up" id="1">
<div class="panel-content">
<div class="close"></div>
<p style="margin-bottom: 30px; color:white;">FIRST PANEL</p>
</div>
</div>
<div class="panel-up" id="2">
<div class="panel-content">
<div class="close"></div>
<p style="margin-bottom: 30px; color:white;">SECOND PANEL</p>
</div>
</div>
<img class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)" src="https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixlib=rb-1.2.1&w=1000&q=80">
<div class="content" style="color:white">
<h2 style="margin-top:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies aliquet quam quis faucibus. Maecenas at nibh hendrerit ex lobortis tristique. Ut hendrerit aliquet lacus, sed bibendum nisl dapibus non. Etiam eleifend eu ipsum at varius. Nam metus odio, placerat eu lacus quis, euismod finibus magna.</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>R></code> - Open panel with pressing "R" </li>
</ul>
</div>
<script src='https://www.lowescdn.com/scaffold/1.2.0/js/scaffold.min.js'></script>
CSS
.content {
padding: 50px;
position: absolute;
width: 90%;
-webkit-transition: all .7s ease;
transition: all .7s ease;
transform: scale(1);
opacity:1;
bottom:10%;
}
.content.hidefor-panel-up {
bottom: 20%;
transform: scale(0.95);
opacity:0;
}
.ip {
display:block;
width:100%; height:100%;
object-fit: cover;
position: absolute;
-webkit-transition: all 1s ease;
transition: all 1s ease;
opacity:1;
top:0;
opacity:1; z-index:-5; position:absolute;
}
.ip.hidefor-panel-up {
opacity:1;
top: 10%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #06113E;
line-height: 1.5em;
font-size: 15px;
overflow: hidden;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1,
h2,
h3 {
margin-bottom: 0.5em;
}
ul {
margin: 30px 40px;
}
li {
margin: 5px 0;
}
.panel {
padding: 20px;
}
.panel-content {
position: relative;
/*background: #efefef;*/
padding: 30px 50px;
overflow-y: auto;
height: 100%;
}
.panel-content .close {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #ffffff;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-content .close:before {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #ffffff;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-left {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
left: -100%;
width: 45%;
}
.panel-left.expanded {
left: 0;
}
.panel-up {
z-index: 10;
position: fixed;
display: block;
bottom: 0;
-webkit-transition: all .7s ease;
transition: all 0.7s ease-out;
bottom: -20%;
width: 100%;
}
.panel-up.expanded {
bottom: 0;
}
.reveal-left {
float: left;
}
.reveal-up {
float: right;
}
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
}
.nav button {
padding: 4px 6px;
}
.nav a {
font-weight: bold;
color: #222;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
JS
// Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
console.log('hidefor-'+panel);
$(".content").addClass('hidefor-'+panel.substr(1));
$(".ip").addClass('hidefor-'+panel.substr(1));
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-up');
$(".ip").removeClass('hidefor-panel-up');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-up');
$(".ip").removeClass('hidefor-panel-up');
}
});
});
}
revealPanel('.reveal-up','.panel-up', '.close');
//revealPanel('.reveal-left','.panel-left', '.close');
$('#open').on('click', function() {
$('.panel-up').hide();$('#1').show();
});
$('#close').on('click', function() {
$('.panel-up').hide();$('#2').show();
});
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) {
console.log(e.keyCode);
$('.panel-left').addClass('expanded');
}
if (e.keyCode == 82) {
$('.panel-up').hide();$('#1').show();
$('.panel-up').addClass('expanded');
$(".content").addClass('hidefor-panel-up');
$(".ip").addClass('hidefor-panel-up');
}
});
});