<body ng-app="app">
<button ng-click="showRed=true">Show Red Bars</button>
<button ng-click="showRed=false">Hide Red Bars</button>
<p ng-if="showRed" class="red-bar"></p>
<p></p>
<p ng-if="showRed" class="red-bar"></p>
<p></p>
<p ng-if="showRed" class="red-bar"></p>
<p></p>
<p ng-if="showRed" class="red-bar"></p>
<p></p>
</body>
body {
font-family: 'Lato';
margin: 10px auto;
max-width: 800px;
text-align: center;
}
ul {
padding: 0;
margin-top: 20px;
text-align: center;
font-size: 1.1em;
}
ul li {
list-style: none;
display: inline-block;
padding: 5px 15px;
margin: 2px 0;
background: orange;
border-radius: 5px;
}
ul li a {
color: white;
text-decoration: none;
}
h1 {
margin: 10px;
text-align: center;
}
h2 {
margin: 10px;
margin-top: 40px;
}
p {
width: 425px;
height: 30px;
border-radius: 5px;
background: cornflowerblue;
text-align: center;
margin: 5px auto;
color: white;
}
.red-bar {
background: red;
}
button {
border: none;
background: orange;
color: white;
padding: 10px;
margin: 10px;
margin-top: 40px;
width: 200px;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.red-bar.ng-enter {
transition:all ease-in 0.25s;
height: 0px;
}
.red-bar.ng-enter.ng-enter-active {
height: 30px;
}
