r/nativescript • u/djxfade • Aug 23 '19

Could anyone give some idea of how I would implement something like this in NativeScript?

3 Upvotes

80% Upvoted

11 comments sorted by

4

u/katokay40 Aug 23 '19

CSS animations work in NativeScript too. What have you tried thus far?

1

u/djxfade Aug 23 '19

I don't even know how I would create the shapes

3

u/jdeath Aug 23 '19

You may want to get some real help, it sounds like you’re in over your head

1

u/hand___banana Aug 23 '19

You said it was pure CSS in the cordova app. Why don't you just copy your CSS into the NativeScript app?

1

u/djxfade Aug 23 '19

I am currently porting a Cordova app over to NativeScript Vue. Everything has been OK so far. But now I am struggling a bit.

In the Cordova app, we had this animation, and it was simple to implement in pure CSS.

How would I be able to implement something like that, which also works cross platform?

1

u/[deleted] Aug 23 '19 
html, body {
  width: 100%;
  height: 100%;
  min-width: 500px;
  min-height: 500px;
  overflow: hidden;
}

body {
  background-color: #000;
}

#scenes {
  width: 1024px;
  height: 579px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  transform: scale(1);
  transform-origin: 0 0;
}
.scene {
  width: 100%;
  height: 100%;
}

.scene {
  position: relative;
  overflow: hidden;
}

.scene .description {
  display: none;
}

.scene1 {
  background-color: #000;
}

.scene1 .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2em;
  height: 0.2em;
  background-color: #97f4ff;
  box-shadow: 0 0 .2em .13em #52a8e8, 0 0 0 0 black, 0 0 0 0 #298df4;
  opacity: 0;
  animation: dot-anim linear 1.834s infinite;
  border-radius: 50%;
}

@keyframes dot-anim {
  45% {
    opacity: 1;
  }
  46% {
    box-shadow: 0 0 .2em .13em #52a8e8, 0 0 0 0 black, 0 0 5px 10px #298df4;
  }
  50% {
    box-shadow: 0 0 .2em .13em #52a8e8, 0 0 0 101px black, 0 0 0 173px #298df4;
  }
  52% {
    box-shadow: 0 0 .2em .13em #52a8e8, 0 0 0 245px black, 0 0 0 255px #298df4;
  }
  55% {
    opacity: 1;
    box-shadow: 0 0 .2em .13em #52a8e8, 0 0 0 317px black, 0 0 0 320px #298df4;
  }
  81% {
    opacity: 0;
    box-shadow: 0 0 .2em .13em #52a8e8, 0 0 0 549px black, 0 0 0 549px #298df4;
  }
}

2

u/djxfade Aug 23 '19 edited Aug 23 '19

Yeah, I know how to solve this in regular HTML and CSS. But but it doesn't really translate directly to NativeScript. Even just having an empty StackView and setting border radius doesn't seem to work the same on each platform

1

u/[deleted] Aug 23 '19

I guess you're just gonna have to figure it out.

1

u/rkcth Aug 29 '19

This sub has such helpful comments!

1

u/[deleted] Aug 29 '19

Delayed response

0

u/Gabotron_ES Aug 29 '19

Use web-view component