Slide Left animated transition in ng-hide, ng-Anim

2019-01-23 06:38发布

I have created jsfiddle http://jsfiddle.net/99vtukjk/ On clicking left or right text, currently the animation for hide is upwards, how can we change it to slide left animation e.g slide & fade to left menubar?.

   <body ng-app="myApp1">
       <div id='outerdiv' ng-controller="MyCtrl" >
             <div ng-click="myValue=true" >LEFT</div>
             <div  ng-click="myValue=false">RIGHT</div>
               <div id="one" class='animate-hide'  ng-hide="myValue"> 
               this is just a sample div
               </div>
         {{myValue}}
       </div>
   </body>

CSS:

.animate-hide {
 -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.animate-hide.ng-hide {
  line-height:0;
  opacity:0;
  padding:0 10px;
}

Angular Module

  var app = angular.module("myApp1", ["ngAnimate"]);
    app.controller("MyCtrl", function ($scope) {
    $scope.myValue=false;
    });

标签： angularjs css3 ng-animate

2条回答

走好不送

2楼-- · 2019-01-23 06:49

you can set left: 0 on .animate-hide

and left: -100% on .animate-hide.ng-hide

here's a working fiddle

One thing that can help you make beautiful animations is using Animate.css

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects.

0人赞添加讨论(0) 举报

Anthone

3楼-- · 2019-01-23 07:09

Check out ngAnimate. Amazing.

DEMO

0人赞添加讨论(0) 举报

Slide Left animated transition in ng-hide, ng-Anim

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间