waseemdev / ng-ionic-connectedanim

Connected Animation (Shared Element Transition) for Ionic Framework.
MIT License
12 stars 3 forks source link

Doesn't work #1

Open dotnetdreamer opened 6 years ago

dotnetdreamer commented 6 years ago

Hi I have tried the example from list page to detail but it doesn't work with ionic 3. any idea ? Any example i can see ?

waseemdev commented 6 years ago

Hi, I uploaded an example, take a look: https://github.com/waseemdev/ng-ionic-connectedanim/tree/master/example

dotnetdreamer commented 6 years ago

Hi, i tried from the example but still same issue. There is opacity which is always returning 0. Here is my code: Listing page:

<ion-content>
        <ion-list>
                <button ion-item (click)="onPressReleaseTaped(pressReleases[0], 0)">
                        <img src="https://via.placeholder.com/350x150" [animStart]="'book-image'" animItem>
                </button>
            </ion-list>
</ion-content>

    onPressReleaseTaped(pressrelease: PressRelease, index) {
        this.connectedAnimationService.setItemIndex(index, this);

        this.navCtrl.push('PressReleaseDetailsPage', {
            pressrelease: pressrelease
        });
    }

And then in detail page:

<ion-content>
    <div class="image">
        <img src="https://via.placeholder.com/350x150" [animEnd]="'book-image'">
    </div> 
</ion-content>

Here is the DOM and the animation doesn't happens:

image

waseemdev commented 6 years ago

Please, try installing the latest version. There was a bug in the animation on iOS, but the target image should be visible at the end regardless of the animation issue, I've tested it now on Android and iOS without problems, is there any errors in the console?

dotnetdreamer commented 6 years ago

the version i have is same as in example. 0.0.42. I force opacity to 1. Its showing but the animation is still not occurring. And there is no error in console.

waseemdev commented 6 years ago

Today I published a new version, try to install the latest one:

npm i --save ng-ionic-connectedanim@latest
taofik-nos commented 6 years ago

Thank you for this, what the demo showcases is exactly what i want, but as @dotnetdreamer mentioned, its not working and the image in the second page is showing up. Could it be that i am using lazy loading? i am importing it in 2 modules of each page.

waseemdev commented 6 years ago

@taofik-nos Thank you. On Android or iOS and what is the version of System WebView? Are you using latest version 0.0.46?

taofik-nos commented 6 years ago

Android System WebView is 61.0.3163.98 but I am using chrome webview 69.0.3497.100 and yes, using 0.0.46 Thank you, let me know if I can help resolve this issue.