gpt4 book ai didi

angularjs - 在 ng-hide、ng-Animate 中向左滑动动画过渡

转载 作者:技术小花猫 更新时间:2023-10-29 10:31:19 24 4
gpt4 key购买 nike

我创建了 jsfiddle http://jsfiddle.net/99vtukjk/点击左侧或右侧文本时,当前隐藏动画是向上的,我们如何将其更改为向左滑动动画,例如向左菜单栏滑动和淡入淡出?。

   <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 模块

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

最佳答案

你可以在.animate-hide上设置left: 0

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

这是一个有效的 fiddle

可以帮助您制作精美动画的一件事是使用 Animate.css

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

关于angularjs - 在 ng-hide、ng-Animate 中向左滑动动画过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26249373/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com