动画中的div角JS幻灯片动画？ [英] Animation in angular js slide animation of div?

问题描述

您可以请你告诉我，我们如何滑动格当用户点击标签。我做演示的jQuery Mobile的（小提琴的 http://jsfiddle.net/ezanker/o9foej5L/1/ ），其中我有三个选项卡，并用它显示过渡可以请你告诉我的标签，我们如何能够做到的角度相同？我试图做到这一点，但我没能做到这一点我怎么AIL的角度实现这一目标？

http://plnkr.co/edit/ornYCV15uV8lPNL1ujPL?p=$p $ PVIEW

  $（函数（）{
        $（＃猫头鹰演示）。owlCarousel（{
            导航：假的，//显示下一个和$ P $光伏按钮
            分页：假的，//分页隐藏点
            slideSpeed​​：300，
            paginationSpeed​​：400，
            singleItem：真实，
            afterMove：功能（）{
                VAR猫头鹰= $（＃猫头鹰演示）的数据（owlCarousel'）。
                $（tabBtn）。removeClass移除（UI-BTN-激活）EQ（owl.currentItem）.addClass（UI-BTN-活动）。;
            }
        }）;
    }）
 

解决方案

长RND后。我是能够解决这个问题。我自己做这样的指令比使用该指令我动画的div
这里是演示
http://plnkr.co/edit/M08sP4oEZLWr6HgGKAde?p=$p$pview

  app.directive（'owlCarousel'，函数（）{
  返回{
    限制：'A'，
    范围： {
      owlOption：'='
    }，
    链接：功能（范围，元素，ATTRS）{
      $（元素）.owlCarousel（scope.owlOption）;
    }
  };
}）;
 

Can you please tell me how we slide div when user click tab .I make demo in jQuery Mobile (fiddle http://jsfiddle.net/ezanker/o9foej5L/1/ ) in which I have three tab and using the tab it show transition can you please tell me how we can do same in angular ? I am trying to achieve this but I am not able to do that how I ail achieve this in angular?

Plunker http://plnkr.co/edit/ornYCV15uV8lPNL1ujPL?p=preview

 $(function(){
        $("#owl-demo").owlCarousel({
            navigation : false, // Show next and prev buttons
            pagination : false, //hide pagination dots
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem:true,
            afterMove: function(){
                var owl = $("#owl-demo").data('owlCarousel');
                $(".tabBtn").removeClass("ui-btn-active").eq(owl.currentItem).addClass("ui-btn-active");
            }
        });
    })

解决方案

After a long RND .I am able to solve that problem own .I make a directive like that than using that directive I animate the div Here is demo http://plnkr.co/edit/M08sP4oEZLWr6HgGKAde?p=preview

app.directive('owlCarousel', function() {
  return {
    restrict: 'A',
    scope: {
      owlOption: '='
    },
    link: function(scope, element, attrs) {
      $(element).owlCarousel(scope.owlOption);
    }
  };
});

这篇关于动画中的div角JS幻灯片动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！