I made a banner where the title is work with CSS animation along with static image:
.strike { position:relative; }
.strike::after {
content:' ';
position:absolute;
top:84%; left:-1%;
width:0; height:36px;
opacity:100%;
transform:translateY(-50%);
background:repeat-x url("/images/strikethrough.png");
animation: strike 1s linear .3s 1 forwards;
}
@keyframes strike {
to { width: 9%; }
}
CSS code on above is animating the image from static folder /images/strikethrough.png
, and here where the strike
class appear in HTML:
<h1 class="font-bold text-28 md:text-3xl lg:text-42 strike">
{{ title }}
</h1>
The animation is actually working in dev mode, when I generate it into static it's suddenly not working at all, you can check the nuxt.config.js
file in down here:
import { I18N } from './config/i18n'
const path = require('path')
export default {
// Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
ssr: false,
target: 'static',
generate: {
fallback: true
},
env: {
base: process.env.base,
title: process.env.title,
desc: process.env.desc,
logo: process.env.logo,
google_analytics_id: process.env.google_analytics_id
},
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'website',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'website: Solution' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600;1,700&display=swap' }
]
},
/* nuxt.js Router */
router: {
middleware: ['show_link_contact']
},
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [
'~assets/styles/tailwind.css'
],
loading: {
color: '#417AC9',
height: '5px'
},
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
{ src: '~plugins/vuespinner.js' },
{ src: '~plugins/vuelazyload.js' },
// { src: "~plugins/crisp.js", mode: "client" },
// Mixins
{ src: '~mixins/global.js' },
// Models
'~/models/news',
'~/models/gallery',
'~/models/clients',
'~/models/career',
'~/models/contact'
],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
// https://go.nuxtjs.dev/eslint
'@nuxtjs/eslint-module'
],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
'nuxt-purgecss',
['nuxt-i18n', I18N],
'vue-social-sharing/nuxt'
],
purgeCSS: {
mode: 'postcss',
enabled: (process.env.NODE_ENV === 'production'),
whitelist: [
'slick-',
'career__jobdesk',
'client__',
'form__',
'home-',
'card-product',
'grid__excellence',
'btn__jobdesk',
'popup__gallery',
'leaflet-',
'gallery',
'v-bounce'
],
whitelistPatterns: [
/^slick-/, /^career__jobdesk/, /^client__/, /^form__/, /^home-/, /^card-product/, /^grid__excellence/, /^btn__jobdesk/, /^popup__gallery/,
/^leaflet-/, /^gallery/, /^v-bounce/
]
},
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
postcss: {
plugins: {
'postcss-import': {},
tailwindcss: path.resolve(__dirname, './tailwind.config.js'),
'postcss-nested': {}
}
},
preset: {
stage: 1 // see https://tailwindcss.com/docs/using-with-preprocessors#future-css-featuress
},
optimization: {
splitChunks: {
cacheGroups: {
tailwindConfig: {
test: /tailwind\.config/,
chunks: 'all',
priority: 10,
name: true
}
}
}
}
}
}
Note: I'm newbie to nuxt and open to all solution