javascript - 使用 Angular 动画(ng-show)添加滑入和滑出动画-6ren

javascript - 使用 Angular 动画(ng-show)添加滑入和滑出动画

转载作者：行者123 更新时间：2023-11-28 07:37:31

25

4

所以我有两组 4 个按钮。一次只能通过 ng-show 表达式显示一组按钮。我很难使用 Angular 动画 css 在 ng-show-add 上创建幻灯片并在 ng-show-remove 上创建幻灯片。这是我的代码:

<script>
    angular.module('myApp', ['ngAnimate']).
    controller('theController', ['$scope', function($scope) {
        $scope.imageAnalysis = false;

        $scope.toggleImageBtns = function() {
            $scope.imageAnalysis = !$scope.imageAnalysis;
        };
    }]);
<script>
<body>
    <div class="container" ng-controller="theController">
        <div class="row feature-btns" ng-show="imageAnalysis === false">
            <div class="col-xs-3">
                <div class="btn btn-default"> feature btn 1 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default"> feature btn 2 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default"> feature btn 3 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default" ng-click="toggleImageBtns()"> click me to see image buttons </div>
            </div>
        </div>
        <!-- /.row -->
        <div class="row image-btns" ng-show="imageAnalysis === true">
            <div class="col-xs-3">
                <div class="btn btn-default"> image btn 1 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default"> image btn 2 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default"> image btn 3 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default" ng-click="toggleImageBtns()"> go back to feature buttons </div>
            </div>
        </div>
    </div>    
</body

最佳答案

这是一个 CSS 片段，它将从右侧滑入您的按钮。它应该让您了解需要使用和可以操作的类。

.feature-btns {
    position: absolute;
    top: 50px;
    left: 0;
    transition: 250ms ease-in-out all;
}
/* fade out content as it is hidden */
.feature-btns.ng-hide-add {
    opacity: 1.0;
}

.feature-btns.ng-hide-add-active {
    opacity: 0;
}
/* slide in from right*/
.feature-btns.ng-hide-remove {
    left: 100%;
    //left: 1100px;
    position: absolute;
    top: 50px;
}

.feature-btns.ng-hide-remove-active {
    left: 0;
}


.image-btns {
    position: absolute;
    top: 50px;
    left: 0;
    transition: 250ms ease-in-out all;
}
/* fade out content as it is hidden */
.image-btns.ng-hide-add {
    opacity: 1.0;
}

.image-btns.ng-hide-add-active {
    opacity: 0;
}
/* slide in from right*/
.image-btns.ng-hide-remove {
    left: 100%;
    //left: 1100px;
    position: absolute;
    top: 50px;
}

.image-btns.ng-hide-remove-active {
    left: 0;
}

关于javascript - 使用 Angular 动画(ng-show)添加滑入和滑出动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31143630/

25

4

0

文章推荐： c++ - 创建一个二维数组，一维在编译时未知

文章推荐： c++ - 获取对模板参数给定类型对象的虚拟引用

文章推荐： javascript - 如何设置多链式选择按钮的样式。？

java - headless 画
我想以 headless 模式(屏幕上根本没有 GUI)将 JPanel 绘制到 BufferedImage 中。 final JPanel panel = createPanel(); panel.
javascript - 如何实现更逼真的粒子漂 float 画？
我是 Canvas 的新手，正在尝试创建看起来逼真的 float 粒子动画。目前，我正在创建 400 个随机散布在 400x400 Canvas 上的粒子。然后，在每个 requestAnimat
css - 如何在悬停时停止悬 float 画
有没有办法在悬停时停止悬 float 画？ :hover 这是一个显示动画的链接: https://codepen.io/youbiteme/pen/RprPrN 最佳答案只需为您的 svg 悬停添
java - 画 donut 谷歌地图Android
我想在谷歌地图上绘制覆盖图，其中除了特定点周围 1.5 公里半径以外的所有内容都被遮蔽了。为此，我尝试使用带有大量边框的圆圈，所以我会在边框中放置透明中心和覆盖颜色来实现这一点，但它无法渲染。
ios - 画(_直角: CGRect) not getting called in custom view
我正在尝试通过扩展类 UIView 来创建自定义 View ，该类可以在自定义 View 的中心显示一个圆圈。为了添加自定义绘图，我重写了 draw(_ rect: CGRect) 方法，如下所示。

首页

博学

6Ren·AI

商城

javascript - 使用 Angular 动画(ng-show)添加滑入和滑出动画