Uncaught TypeError: Cannot read property 'className' of undefined

[desenvolvedorindie]

Line 773: animateSlideInRightDom[0].className += ' done';

I think just a undefined check

Version: 0.4.2

[germanferrero]

Same problem

[rbutera]

thanks for finding this

[do-web]

Same problem, big bug, cant use this plugin because of the bugs

[jjaybrown]

@wfcreations can you provide a full stack trace and possibly a codepen so I can attempt to re-create the issue and fix.

Thanks

[desenvolvedorindie]

There's some Ionic-Material CDN?

Work fine:

ionicMaterialMotion.fadeSlideInRight();

<div class="list animate-fade-slide-in-right">
    <div class="item card item-text-wrap">
    ...
    </div>
</div>

But when I add ng-repeat

ionicMaterialMotion.fadeSlideInRight();

<div class="list animate-fade-slide-in-right">
    <div class="item card item-text-wrap" ng-repeat="card in cards">
        ...
    </div>
</div>

I receive: Uncaught TypeError: Cannot read property 'className' of undefined(anonymous function) @ _motion.js:464

I don't know if I need wait something

Solve when I put inside of $timeout

$timeout(function () {
    ionicMaterialMotion.fadeSlideInRight();
}, 300);

[ericraio]

+1 i had this issue, throwing it into a timeout fixed it. looks like a race condition with ng-repeat

[andysdesigns]

same issue here and no luck for solution even after adding $timeout() ( might wanna get myself dirty for this one to work as i cannot use the plugin ).

as @ericraio mentioned, "looks like a race condition with ng-repeat"

[desenvolvedorindie]

I suppose your ng-repeat data need finish to load before animation effect

Example:

$http.get('/someUrl').success(function(data, status, headers, config) {
    ionicMaterialMotion.fadeSlideInRight();
});

[sameera207]

:+1: for the timeout, Had the same issue and throwing the timeout fixed it. One concern through, What happens if the list takes more than 300 to load (for API delay etc..) ?

Ended up doing both @wfcreations suggested,

$http.get('/someUrl').success(function(data, status, headers, config) {

   $timeout(function () {
       ionicMaterialMotion.fadeSlideInRight();
   }, 300);

});

[desenvolvedorindie]

:+1:

[andresetevejob]

I have the same problem on my first page Uncaught TypeError: Cannot read property 'className' of undefined

[KusumaScriptbees]

Same problem not able able to solve. Help would be grateful.

[kashban]

Throwing me into the crowd. Same issue here and neither of the two solutions proposed worked for me ($timeout and calling it from within the callback after the data has been loaded).

[hectorpalmatellez]

Same problem here, couldn't get to fix it.

[andresetevejob]

Hi All,

I want to know if ionic material design work with android 4.0 and 4.2 because I have used it in the project and it not works well

2015-09-11 22:04 GMT+01:00 Héctor Palma Téllez [email protected]:

Same problem here, couldn't get to fix it.

— Reply to this email directly or view it on GitHub https://github.com/zachsoft/Ionic-Material/issues/68#issuecomment-139660860 .

[AhsanAyaz]

I have the same problem. Timeout solves the problem but it is not neat at all. The list can vary and ng-repeat can take different time periods to render items (in which the code crashes) Please fix this asap, i look forward to implement ionic material into my project

[kashban]

I found a way to solve this:

https://github.com/zachsoft/Ionic-Material/issues/43

There is only one caveat with filters, though: The filter is applied before the animation starts, so for a short time the old list is visible while the filtered entries are removed, then the animation kicks in, blanks the list and the filtered list animates in.

So if you're not using filters on your ngRepeat, the solution from that link'll do. For filters I guess Ionic Material has to provide some solution.

[beerni]

Same problem as mentioned. I include the timeout and nothing, the classname error is still there

[ahayder]

+1

[amitpatil321]

I also added timeout with 10000ms and even 20000 ms still error is there. Totally helpless now :( @wfcreations : Please give us some more clue.

[janziemba]

+1

[alkahtani]

any updates/idea how to solve this issue

[Arvind6353]

Hi Any Update on this issue ?

[amitpatil321]

Try setting a timeout. Initialise library 3 to 4 second later after app loads or if you are using on lists then after list completely loads.

On Jul 1, 2017 11:09 PM, "Arvind" [email protected] wrote:

Hi Any Update on this issue ?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/zachfitz/Ionic-Material/issues/68#issuecomment-312445603, or mute the thread https://github.com/notifications/unsubscribe-auth/AC3j73aQVo-6pQ4426RTxS6xZcgQ0N0Pks5sJoRSgaJpZM4EkXcR .

[Arvind6353]

I tried setting timeout , but still facing the same error intermittently.

I am using firebase to get the list of items to show to the user.

I have set the timeout to 3000 . But still facing this issue.

I don't think I can use callbacks here since am using firebase and syncing the data directly.

Let me know if you have any other solution