我不知道這個問題是否屬於Angular2。但我使用的是Angular2,並且想要使用HTML,CSS & JS集成this demo shown here - (please check its working demo and animated content)。這個演示顯示了帶有動畫內部內容的引導程序的傳送帶。如何在Angular2中使用jquery和其他.js庫
This is my Demo in Plunker with Angular2。我試圖整合它,一切正常,除非我看不到文章中顯示的旋轉木馬內部動畫。
另請指導如何使用jQuery和其他JS庫與Angular2?
的index.html
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Demo scripts -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Animate.css library -->
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">
<script src="js/demo.js"></script>
demo.js
/* Demo Scripts for Bootstrap Carousel and Animate.css article
* on SitePoint by Maria Antonietta Perna
*/
(function($) {
//Function to animate slider captions
function doAnimations(elems) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function() {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function() {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
如何使用本demo.js包含Angular2應用程序內的jQuery代碼?
沒有它不喜歡這樣。我遵循了文章所說的。一切都很好,甚至。但問題是我看不到文章中顯示的動畫內容。所以無法弄清楚。有沒有什麼可以用Angular2來完成,或者只是缺少一些我無法弄清楚的東西。 – nyks
沒有angular2它的作品,它沒有任何問題。我有anuglar2應用程序,並希望實施。而已。但它不起作用。 – nyks
如果您已閱讀我的問題。我已經明確提到我不知道它是否屬於angular2或不屬於。但事情是我想在angular2應用程序中使用它。使用angular2應用程序,它不會工作。我已經提供了暴徒或我的工作。你可以檢查它。一切正常。只有我想讓旋轉木馬的動畫內容不起作用。該文章使用'animation.css'文件和'demo.js(jQuery代碼)'。但它不起作用。請幫忙。 – nyks