javascript - Turn.js 就像 ionic 2 的动画书

Question

我在整个互联网上搜索了 ionic 2 的动画书插件，但没有找到。后来我尝试将 javascript 活页簿插件作为外部库包含在内，但每次都失败了。那里有任何 npm 动画书包吗？如果没有，如何在我的 ionic 2 项目中包含 javascript 插件？

Answer 1

“那里有任何 npm 动画书包吗？”您可以试试这个存储库:https://www.npmjs.com/package/angular-turnjs

“如何在我的 ionic 2 项目中包含 javascript 插件？”

我选择将 TurnJS 导入为外部库。您可以在此处使用 Ionic 3 克隆工作版本:https://github.com/diegonobre/ionic-turnjs

如果您想实现自己的版本，请按照以下说明操作:

使用 Ionic CLI 创建 ionic 项目

ionic start ionic-turnjs blank

添加 jQuery 和 TurnJS

• 将 jQuery 和 TurnJS 库复制到您的 src/assets文件夹

• 编辑您的 src/index.html在 </head> 之前添加以上代码标签

替换home.ts用上面的代码

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';

declare var $:any;

@Component({
selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    constructor(
        public navCtrl: NavController,
        public platform: Platform
    ) {}

    ionViewDidLoad() {
        $("#flipbook").turn({
            width: '100%',
            height: this.platform.height() - 50,
            display: 'single',
            autoCenter: true
        });
    }
}

创建您的 TurnJS View

<ion-content>
    <div id="flipbook">
        <div class="cover"> Turn.js </div>
        <div class="page"> Page 1 </div>
        <div class="page"> Page 2 </div>
        <div class="page"> Page 3 </div>
        <div class="page"> Page 4 </div>
        <div class="cover"> The end </div>
    </div>
</ion-content>

将 CSS 添加到 home.scss

page-home {
    .cover {
        overflow:hidden;
        background-color: lightgray;
        border: solid 1px black;
    }
    .page {
        overflow:hidden;
        background-color: white;
        border: solid 1px gray;
        font-weight: bold;
        text-align: center;
        font-size: 20px;
        line-height: 100px;
    }
}