CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrap
Oscar Franco
Oscar Franco

Reputation: 6250

how to get a css slide transition using bootstrap modal and angular ui?

I'm trying to get a slide animation inside a bootstrap modal,using angular ui and angular-animate,I'm trying to make a wizard, however I can't seem to make the animation work.

this is the code of my bootstrap modal:

<div class="modal-header">
<h3>New Template Wizard</h3>
</div>

<p>{{step}}</p>

<div ng-switch on="step">
<div class="slide" ng-switch-when="1">
    <div class="list-group">
        <a ng-click="stepUp()" class="list-group-item">
            <h4 class="list-group-item-heading"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;New Thing Template</h4>
            <p class="list-group-item-text">A thing is a collection of devices</p>
        </a>
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading"><span class="glyphicon glyphicon-off"></span>&nbsp;New Device Template</h4>
            <p class="list-group-item-text">A device is a collection of sensors (channels)</p>
        </a>
    </div>
</div>
<div class="slide" ng-switch-when="2">
    <p>STEP 2 of wizard</p>
</div>

and my css:

.slide.ng-enter, .slide.ng-leave {
-webkit-transition: 575ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 575ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 575ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 575ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 575ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}

.slide.ng-enter { 
left: 100%;
}
.slide.ng-enter-active {
left: 0;
}
.slide.ng-leave {
left: 0;
}
.slide.ng-leave-active {
left: -100%;
}

this is not working, any suggestions?

Upvotes: 1

Views: 1466

Answers (1)

Oscar Franco
Oscar Franco

Reputation: 6250

I found the answer, turns out the css was wrong (I think), anyways this is the final html and css and it's working.

html:

<div ng-switch="step" class="my-switch-container">
<div class="my-switch-animation" ng-switch-when="1">
    <div class="list-group">
        <a ng-click="stepUp()" class="list-group-item">
            <h4 class="list-group-item-heading"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;New Thing Template</h4>
            <p class="list-group-item-text">A thing is a collection of devices</p>
        </a>
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading"><span class="glyphicon glyphicon-off"></span>&nbsp;New Device Template</h4>
            <p class="list-group-item-text">A device is a collection of sensors (channels)</p>
        </a>
    </div>
</div>
<div class="my-switch-animation" ng-switch-when="2">
    <p>STEP 2 of wizard</p>
</div>

css:

.my-switch-container {
  position:relative;
  height:200px;
}

.my-switch-animation.ng-enter,
.my-switch-animation.ng-leave {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
  height:200px;

  position:absolute;
  top:0;
  left:0;
  right:0;
}

.my-switch-animation.ng-enter {
  left:50%;
}

.my-switch-animation.ng-leave,
.my-switch-animation.ng-enter.ng-enter-active {
  left:0;
}

.my-switch-animation.ng-leave.ng-leave-active {

  left:50%;
}

Hope it helps someone else!

Upvotes: 1

Related Questions