I would like to fade an entity in A-Frame and I can't seem to find a solution using the documentation. Any help would be appreciated
Thanks!
For a-frame 0.9.0+ check out Kevins anwser. <a-animation> is deprecated since then.
You could use <a-animation> changing the material.opacity attribute like this:
<a-entity id="myEntity">
<a-animation attribute="material.opacity" dur="1000" repeat="0></a-animation>
</a-entity>
. You can check out the documentation here.
Live fiddle here.
Include animaton component: https://github.com/ngokevin/kframe/tree/master/components/animation
Then:
<a-box animation="property: components.material.material.opacity; from: 1; to: 0"></a-box>
I go through components for performant tweening that skips A-Frame setAttribute.
Related
In my simple html file I have this to use three.js functionalities:
<script src="js/three.js"></script>
Now I want to use OrbitControls which is not part of three.js standard library it seems.I am not able to find it in three.js website.
What's correct way of using it?
download the OrbitControls.js and use
<script src="js/OrbitControls.js"></script>
use npm three and
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
I started to use vuetify 3 beta, I know it is not stable according to the documentation but I still tried.
<v-text-field placeholder="Type a name" class="v-field__outlined" outlined></v-text-field>
End result is the basic vuetify text field.
How do I fix this, any help is appreciated!
The styles are no longer individual prop values.
Styling options are now set via a prop called variant
variant="outlined"
It is also no longer possible to mix the different styles and rounded appears to be missing so far.
https://next.vuetifyjs.com/en/components/text-fields/#variant
Where can we can get the doc link of vuetify 1.3.x version ?
As I am getting one query, i have used <v-treeview /> component of vuetify with the props following below:
<v-treeview :open="open" :items="categoryItems" v-model="selectedCategory" selectable dense open-on-click selectionType="independent" return-object />
I want the v-model data to be an array of object but instead it is returning only id in array.
Thanks in advance
There's a ticket about the documentation server for v1.x being down (probably permanently) check here for more info: https://github.com/vuetifyjs/vuetify/issues/12042
Here's the documentation for 1.5 you can probably find what you are looking for there: https://v15.vuetifyjs.com/en/getting-started/quick-start
for v-treeview: https://v15.vuetifyjs.com/en/components/treeview
You can switch to an earlier version from the dropdown in the top right corner but as noted the archive server for older documentation is down
Previously (I thought?) it was possible to put HTML into vuetify hints but for me this is no longer working. For example, in one of my components I have:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
/>
This hint used to display in red but now I see the full HTML code. Has something changed or am I doing something wrong?
In the Vuetify forum, MajesticPotatoe pointed me towards the bug report https://github.com/vuetifyjs/vuetify/issues/9647. This gave the following slots workaround, which works in my code:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
>
<template v-slot:message="{ message, key }">
<span v-html="message"></span>
</template>
</v-checkbox>
It seems that this used to work without slots before the patch https://github.com/haggys22/vuetify/commit/f0d5edd7ddf7e01ba057b7f3d14604199b6db68d was merged.
behaviour changed from 1.5.19 to 1.5.20
1.5.19 (and before) treats html tags as expected
1.5.20, 1.5.21 treat html tags as simple text
'hint' is the 'string' type so you can't add HTML tags. Here is the screenshot from documentation: https://prnt.sc/qlag61
So, I think you can apply red color from CSS / SCSS using this class name '.v-messages__message' if you really need red color in hint.
Im trying to make a layout with a picture which appears to be moving like a marquee? Is it possible? Please help.. thanks...
Yes, you can:
<marquee scrolldelay="100" bgcolor="grey">
<img src="img.png"/>
</marquee>
jsFiddle here
Edit: it works in all modern browers, and even in ie6,7,8
if you just want a moving image....this should suffice :
<marquee behavior="scroll" direction="left"><img src="/pix/smile.gif" width="100" height="100" alt="smile" /></marquee>
Useful link