个人中心
gpt4 book ai didi

javascript - 将幻灯片动画添加到 ng-repeat

转载 作者：太空宇宙 更新时间：2023-11-04 11:43:27 25 4
gpt4 key购买 nike

在我的代码中，我试图创建多个 div，其中有一个隐藏按钮。单击此按钮时，相应的 div 应逐渐消失，其下方的 div 应位于顶部(即它们应通过一些动画填充消失的 div 创建的空间)。

这是我的html代码:

<body ng-app="task" ng-controller="repeat">
 <div ng-repeat='x in array' ng-hide="x.show">
  <p>{{ x.text }}
  </p>
  <button ng-click="toggle($index)">Hide</button>
 </div>
</body>

我的 js 文件包含以下内容:

var app = angular.module('task');
app.controller('repeat',function($scope){
 $scope.array = [{
     show: true,
     text:'Sample Text 1'},
    { 
     show: true,
     text:'Sample Text 2'},
    { 
     show: true,
     text:'Sample Text 3'}];

 $scope.toggle = function(){
  $scope.array[index].show = false ;
 };
})

在我的 css 中有以下代码:

.ng-hide-add      { animation:1s fade ease; }

@keyframes fade{
  0% {
      opacity: 1;
      }

  100% {
        opacity: 0;
       }
 }

我看了很多网上发布的 slider 动画，并试图将它们改编到我的程序中，但直到现在都以失败告终。

你能告诉我应该添加什么代码才能使动画成为可能吗？非常感谢您的回复。

最佳答案

尝试放置此 css:

.ng-leave {
  -webkit-animation: fadeOutLeft 1s;
  animation: fadeOutLeft 1s;
}
.ng-enter {
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

关于javascript - 将幻灯片动画添加到 ng-repeat，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31159282/

25 4 0
文章推荐： c++ - 堆栈超出范围。也许没有正确调用它？
文章推荐： java - 为什么 Vector 会出现 ConcurrentModificationException？
文章推荐： java - p :ajax listener don't work properly with p:selectOneMenu
文章推荐： c++ - Mac 应用程序开发 : How to select app language while installing?
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com