I have created an Angular animation for my application,Here is the code :
export const slideToRight = trigger('routerAnimate', [
state('void', style({position: 'fixed', 'width': '100%', 'height': '70%'})),
state('*', style({position: 'fixed', 'width': '100%', 'height': '70%'})),
transition('void => *', [
style({transform: 'translateX(-100%)'}),
animate('5s ease-in', style({transform: 'translateX(0)'}))
]),
transition('* => void', [
style({transform: 'translateX(0)'}),
animate('5s ease-out', style({transform: 'translateX(100%)'}))
])
]);`
And i use HostBinding in my Component.ts like this
#HostBinding('#routerAnimate') state;
The code is too long, so it is not posted.
please look my gitHubmy application
why my animation's transition not working
thanks a lot
Refer your source.. online 28-29: https://github.com/zhangManGod/task/blob/master/task/src/app/app.module.ts
In AppModule you import multiple animation module (BrowserAnimationsModule and NoopAnimationModule)
Try to remove NoopAnimationModule (use BrowserAnimationsModule only)
What's the difference between BrowserAnimationsModule and NoopAnimationsModule?
Related
I am trying to Convert some HTML to PDF using PDFMake and htmlToPdfMake in my Vue Project. By default PDFMake only supports Roboto but i wanted to add some custom fonts so I added the Font Files (.ttf) to ./examples/fonts in the PDFMake folder inside ./node_modules. I then used the node build-vfs.js "./examples/fonts" command and compiled a new vfs-fonts.js file. This here is my code.
import pdfMake from "pdfmake/build/pdfmake.js";
import pdfFonts from "pdfmake/build/vfs_fonts.js";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.pdfMake.vfs = pdfFonts.pdfMake.vfs;
const toPdf = document.getElementById("final").innerHTML;
const html = htmlToPdfmake(toPdf);
pdfMake.fonts = {
AbrilFatface: {
normal: "../assets/fonts/AbrilFatface-Regular.ttf",
bold: "../assets/fonts/AbrilFatface-Medium.ttf",
italics: "../assets/fonts/AbrilFatface-Italic.ttf",
bolditalics: "../assets/fonts/AbrilFatface-MediumItalic.ttf",
},
Montserrat: {
normal: "../assets/fonts/Montserrat-Regular.ttf",
bold: "../assets/fonts/Montserrat-Medium.ttf",
italics: "../assets/fonts/Montserrat-Italic.ttf",
bolditalics: "../assets/fonts/Montserrat-MediumItalic.ttf",
},
};
const result = pdfMake.createPdf({
styles: {
alignment: "center",
},
pageSize: {
width: 900,
height: 700,
},
pageOrientation: "landscape",
pages: 2,
content: [html],
});
result.getBase64((data) => {
this.setPdf({
pdf: data,
});
});
As you can see, I have manually set the pdfMake window object, also included the pdfMake and vfs-fonts js files and also provided a pdfMake.fonts object. Even after all this, this error appears:
I have no idea why it doesn't work. Please Help.
OP solved the issue by bringing the fonts into the same directory as the code using it (rather than node_modules).
Nothing should really be added there anyway since it's volatile and usually not accessible on a production server.
I have been messing with this for days now but everytime I start trying to add a simpleuploadadapter to the code here the toolbar disappears i.e. remove the line plugins: [ SimpleUploadAdapter, ... ], and all is fine.
I am new to CKEDitor and do find the documentation a bit lacking for a new user
Here is my code
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ SimpleUploadAdapter, ... ], // remove this line and the toolbar appears!
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'underline',
'horizontalLine',
'fontBackgroundColor',
'fontColor',
'fontFamily',
'alignment',
'bulletedList',
'numberedList',
'|',
'indent',
'outdent',
'|',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo',
'highlight',
'specialCharacters']
},language: 'en',image: {toolbar: ['imageTextAlternative','imageStyle:full','imageStyle:side']},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties'
]
},
licenseKey: '',
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'Oops, something went wrong!' );
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
console.warn( 'Build id: 2s2liiisdwtn-fs46wvie39gh' );
console.error( error );
} );
Is your installation custom built or not? If not, did you try to create a custom built setup including that plugin then try checking by loading its sample file? It would help us to see by eliminating the possibilities that anything else on your page design might interfere. Could you please be more clear?
Regards...
I have weird problem.
I want use this hover-effect library (https://github.com/robin-dela/hover-effect) in my nuxt project.
This i have in my contact.vue in script tags
import hoverEffect from 'hover-effect'
export default {
mounted() {
const effect = new hoverEffect({
parent: document.querySelector('.right-section'),
intensity: 0.3,
image1: require('#/assets/images/1.jpg'),
image2: require('#/assets/images/2.jpg'),
displacementImage: require('#/assets/images/dist2.jpg'),
})
},
}
And that effect works perfectly.. BUT when i refresh the page i got this error:
SyntaxError Cannot use import statement outside a module
So i tried add this plugin into plugins/hover-effect.js
import Vue from 'vue'
import hoverEffect from 'hover-effect'
Vue.use(hoverEffect)
then in nuxt.config.js
plugins: [{ src: '~/plugins/hover-effect', mode: 'client' }],
But nothing works.. its always error: hoverEffect is not defined. I tried another 20 ways with no success. I tried this effect in normal Vue project and it works but not in nuxt.js. Can somebody help me with this?
You can configure it in the head of the page:
Page.vue
export default {
head() {
return {
script: [
{src: '../dist/hover-effect.umd.js'}
]
}
},
...
mounted() {
const effect = new hoverEffect({
parent: document.querySelector('.right-section'),
intensity: 0.3,
image1: require('#/assets/images/1.jpg'),
image2: require('#/assets/images/2.jpg'),
displacementImage: require('#/assets/images/dist2.jpg'),
})
},
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
// Doc: https://github.com/nuxt/content
'#nuxt/content',
'hover-effect'
],
Have you tried to add hover-effect library to modules in nuxt.config.js file? All I did was install the package and add it to the module and then have the same code as your script tag. Hope it helped you!
I trying to hide/remove toolbar section( CSV, JSON, OLAP, etc) on my app, which is using react-native-flexmonster, as seen on the image below:
I tried this, but without success
Here is my code:
<FlexmonsterReactNative.Pivot
container= "pivot-container"
toolbar={false}
report = {{
dataSource: {
filename: "data/data.csv"
},
slice: {
columns: [{
uniqueName: "Color"
}],
rows: [{
uniqueName: "Country"
}, {
uniqueName: "[Measures]"
}],
measures: [{
uniqueName: "Price",
format: "currency"
}, {
uniqueName: "Discount",
format: "currency"
}],
},
formats: [{
name: "currency",
currencySymbol: "$",
currencySymbolAlign: "left",
thousandsSeparator: ",",
decimalPlaces: 2
}],
conditions: [{
formula: "#value < 2000",
measure: "Discount",
format: {
backgroundColor: "#CCFFCC",
}
}, {
formula: "AND(#value > 2000, #value < 4000)",
measure: "Discount",
format: {
backgroundColor: "#FFFF99",
}
}]
}}
/>
Some features provided by Flexmonster are not available in React Native while using their module due to some limitations it imposes on the execution of JavaScript.
It includes enabling/disabling the Toolbar.
Even so, it is possible to modify the module itself in the way the desired configuration is adjusted.
For example, the possibility to disable the Toolbar be achieved using the following approach:
Download the module mentioned earlier and modify the following code snippet in the way the toolbar property of the created instance is set to false: https://github.com/flexmonster/react-native-flexmonster/blob/f8d0f7fd6614c06e1a31585c8b8cbe22e3bc653e/src/index.js#L360-L371.
For example:
<script>
new Flexmonster({
container: "#pivot-container",
componentFolder: "<https://cdn.flexmonster.com/>",
toolbar: false,
height: ${height},
width: ${width},
report: JSON.parse('${JSON.stringify(this.props.report)}')
});
${this.registerEvents()}
</script>
Please note that in case such methods are required, the module should be downloaded and connected manually instead of installation through npm.
I'm working on a Vue.js Project I need this
Download Chart
I tried to create a Component like this.
import '../../../assets/js/lib/gauge/justgage.js';
import '../../../assets/js/lib/gauge/raphael.min.js';
Vue.component('justgauge', {
name: 'justgauge',
mounted () {
var g1;
document.addEventListener("DOMContentLoaded", function(event) {
g1 = new JustGage({
id: "justgauge",
value: 72,
//title: "Completed",
fill: '#ffa726',
symbol: '%',
min: 0,
max: 100,
donut: true,
gaugeWidthScale: 0.4,
counter: true,
hideInnerShadow: true
});
});
}
})
I'm getting errors like this-
gauge/raphael.min.js
Module build failed: SyntaxError: Deleting local variable in strict mode (10:22810)
Note: I've used Justgauge.js and raphael on my Local Library. Any help will be highly appretiate.
I made a JustGage component for Vue Js. You can find it here:
https://github.com/agronick/KGauge
The gauge you want would look something like this:
<k-gauge
title="Completed"
:value="72"
:color-steps="['#ffa726']"
:width="500"
:height="300"
:max="100"
:gauge-size="0.4"
:format-function="(x) => `${x.toFixed(2)}%`"
:show-min-max="false"
:doughnut="true"
:shadow-opacity="0"
/>