向左滑动动画过渡ng-hide，ng-Animate
我已经创建了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;
}
角度模块
var app = angular.module("myApp1", ["ngAnimate"]);
app.controller("MyCtrl", function ($scope) {
$scope.myValue=false;
});
问题答案：
您可以设置left: 0在.animate-hide
和left: -100%上.animate-hide.ng-hide
这是一个工作的小提琴
可以帮助您制作精美动画的一件事是使用 Animate.css
animate.css是一堆很棒，有趣且跨浏览器的动画，供您在项目中使用。
-
问题内容： 我有2个html页面，以及这两者都是“插入”到通过在URL dependending 属性和路由器供应商，作为我的AngularJS应用程序的一部分。 可以在AngularJS主页 的“连接后端” 下找到一个示例。 我的问题 ：有没有办法动画化和之间的过渡？ 问题答案： Angularjs 1.1.4现在引入了该指令以帮助动画化不同的元素，尤其是ng- view。 您也可以观看有关此新
-
问题内容： 我试图通过使用CSS过渡来更改悬停元素的背景颜色。我想通过使其从底部向上滚动来做到这一点。我可以使用此功能淡化背景，但我希望它向上滑动： 另一个想法是，将背景应用到一个单独的元素上会更好吗？ 问题答案： 为了 向上滑动背景色， 您需要使用背景图片或某种渐变，同时逐步调整：
-
问题内容： 我正在尝试使用类似于JQuery 和的行为。只有我宁愿使用 我在这里查看ng-animate教程-http: //www.yearofmoo.com/2013/04/animation-in- angularjs.html ， 我可以在提供的示例中再现淡入/淡出效果。 我如何更改CSS来获得向上/向下滑动的行为？另外，如果可能的话，最好让css不知道以像素为单位的组件高度。这样，我可以
-
问题内容： 我所看到的和jQuery的。左右滑动的功能/方式如何？ 问题答案： 您可以使用jQueryUI中的其他效果来执行此操作： 快速示例：
-
主要内容：过渡,实例,实例,实例,实例,JavaScript 钩子,HTML 代码：,JavaScript 代码：,实例,初始渲染的过渡本章节我们主要讨论 Vue.js 的过渡效果与动画效果。 过渡 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。 语法格式 我们可以通过以下实例来理解 Vue 的过渡是如何实现的： 实例 <div id = "databinding"> <button v-on:c
-
问题内容： 因此，我了解了如何同时执行CSS3过渡和动画。我用谷歌搜索的不清楚是什么时候使用它。 例如，如果我想使球弹跳，很明显，动画是必经之路。我可以提供关键帧，而浏览器将做中间帧，并且我将获得一个不错的动画。 然而，在某些情况下，无论哪种方式都可以达到上述效果。一个简单而常见的示例是实现Facebook风格的滑动抽屉菜单： 可以通过以下过渡来实现此效果： 或者，通过类似这样的动画： 使用HTM