CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paul
Paul

Reputation: 3368

Div's contents showing with opacity set to 0

I am attempting to get a panel to slide up when a trigger is selected. This is working in my snippet. The issue is that the contents within the #proposal-panel are showing, even though I have #proposal-panel set to opacity: 0, until the trigger is clicked (.active is added). It is showing at the bottom of the page.

Also, for some reason on my actual site, the panel is not sliding up. I have multiple sections, just like the example. The panel just sets at the bottom of the page. The only thing that happens when the active class is added is the z-index takes effect.

I am wanting the panel to slide from the bottom to the top when triggered. That is what I am trying to do with translateYin the active class.

Does anyone know why the contents are showing and possibly why the panel is not sliding up?

Here is a fiddle.

$('#proposal-trigger').on('click', function () {
		$('#proposal-panel').addClass('active');
	});
#red {
  height: 100vh;
  width: 100%;
  background: red;
}
#blue {
  height: 100vh;
  width: 100%;
  background: blue;
}
#proposal-trigger {
	background: #3B3B3B;
	width: 100px;
	height: 100px;
	position: fixed;
	bottom: 0;
	right: 200px;
}
#proposal-panel {
	background: #333333;
	width: 58%;
	height: 100vh;
	position: fixed;
	padding: 15px 0;
	right: 0;
	bottom: -100vh;
	opacity: 0;
	transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-panel.active {
	transition: ease 0.3s;-webkit-transition: ease 0.3s;
	transform: translateY(0vh);-webkit-transform: translateY(0vh);
	bottom: 0;
	top: 0;
	z-index: 99;
	opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
  <input>
  <input>
</div>
<div id="proposal-panel"></div>

Upvotes: 1

Views: 112

Answers (2)

SpaceDogCS
SpaceDogCS

Reputation: 2968

You don't need to use translateY to do this animations, just need to use top and bottom with the fixed position. And remove the background-color from #proposal-trigger so it doesn't show anymore

Here is a demo

$('#proposal-trigger').on('click', function () {
    $('#proposal-panel').addClass('active');
});

<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
  <input>
  <input>
</div>
<div id="proposal-panel"></div>

#red {
  height: 100vh;
  width: 100%;
  background: red;
}
#blue {
  height: 100vh;
  width: 100%;
  background: blue;
}
#proposal-trigger {
    width: 100px;
    height: 100px;
    position: fixed;
    bottom: 0;
    right: 200px;
}
#proposal-panel {
    background: #333333;
    width: 58%;
    position: fixed;
    padding: 15px 0;
    right: 0;
    bottom: 0;
  top: 100%;
    opacity: 0;
    transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-panel.active {
    transition: ease 0.3s;-webkit-transition: ease 0.3s;
    bottom: 0;
    top: 0;
    z-index: 99;
    opacity: 1;
}

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53709

Assuming it's the little black box you see at the bottom, that's from #proposal-trigger. #proposal-panel is hidden. I removed the background color from #proposal-trigger to get rid of that.

And to have the element slide up, use transform: translate().

$('#proposal-trigger').on('click', function() {
  $('#proposal-panel').addClass('active');
});
#red {
  height: 100vh;
  width: 100%;
  background: red;
}

#blue {
  height: 100vh;
  width: 100%;
  background: blue;
}

#proposal-trigger {
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 0;
  right: 200px;
}

#proposal-panel {
  background: #333333;
  width: 58%;
  height: 100vh;
  position: fixed;
  padding: 15px 0;
  right: 0;
  opacity: 0;
  transition: 0.3s;
  transform: translateY(100%);
  bottom: 0;
}

#proposal-panel.active {
  transform: translateY(0);
  z-index: 99;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
  <input>
  <input>
</div>
<div id="proposal-panel"></div>

Upvotes: 3

Related Questions