前提
ここに質問の内容を詳しく書いてください。
(例)
Vue.jsでポートフォリをを作っています。
今までCSSアニメーションで動きをつけていましたがJavaScriptを使ってもっと幅広くアニメーションをつけていきたいと思っています。
しかし下記のサイトのようなHTML・CSS・JSで別れているようなアニメーションはいつも手順がわからず調べても例文などがでず断念していました。
Vueは初心者ですがなんとかここをクリアしたく、下記のHTML・CSS・JSを使ってアニメーションを作る手順を教えていただきたいです。
実現したいこと
HTML
<h1 class="title"> <span>T</span> <span>E</span> <span>X</span> <span>T</span> <span> </span> <span>A</span> <span>N</span> <span>I</span> <span>M</span> <span>A</span> <span>T</span> <span>I</span> <span>O</span> <span>N</span> </h1>
CSS
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap'); .title { display: flex; overflow: hidden; color: #aa8f7b; font-family: 'Josefin Sans', sans-serif; } .title span { display: block; transform: translate(0, 105%); transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; } .title.-visible span { transform: translate(0, 0); } .title span:nth-child(2) { transition-delay: 0.06s; } .title span:nth-child(3) { transition-delay: 0.12s; } .title span:nth-child(4) { transition-delay: 0.18s; } .title span:nth-child(5) { transition-delay: 0.24s; } .title span:nth-child(6) { transition-delay: 0.30s; } .title span:nth-child(7) { transition-delay: 0.36s; } .title span:nth-child(8) { transition-delay: 0.42s; } .title span:nth-child(9) { transition-delay: 0.48s; } .title span:nth-child(10) { transition-delay: 0.54s; } .title span:nth-child(11) { transition-delay: 0.6s; } .title span:nth-child(12) { transition-delay: 0.66s; } .title span:nth-child(13) { transition-delay: 0.72s; } .title span:nth-child(14) { transition-delay: 0.78s; } /****** Base style. ******/ body { display: flex; height: 100vh; justify-content: center; align-items: center; margin: 0; }
JS
const CLASSNAME = "-visible"; const TIMEOUT = 1500; const $target = $(".title"); setInterval(() => { $target.addClass(CLASSNAME); setTimeout(() => { $target.removeClass(CLASSNAME); }, TIMEOUT); }, TIMEOUT * 2);
発生している問題・エラーメッセージ
$ is not defined
試したこと
Vue.jsファイルのテンプレート、スクリプト、スタイルに入れ込んでみましたがどうにも動きません。
エラーの内容は $ is not defined になっていますがそもそもこの形が正しいかも理解していないです。
HTMLとCSSは問題ないと思うのですが肝心のJSの取り込み方が分からないので教えていただけませんでしょうか
<template> <div class="wrap"> <h1 class="title"> <span>T</span> <span>E</span> <span>X</span> <span>T</span> <span> </span> <span>A</span> <span>N</span> <span>I</span> <span>M</span> <span>A</span> <span>T</span> <span>I</span> <span>O</span> <span>N</span> </h1> </div> </template> <script lang="js"> const CLASSNAME = '-visible' const TIMEOUT = 1500 const $target = $('.title') export default { name: 'IndexPage', date: { CLASSNAME: '-visible', TIMEOUT: 1500, $target: $('.title'), }, methods: setInterval(() => { $target.addClass(CLASSNAME) setTimeout(() => { $target.removeClass(CLASSNAME) }, TIMEOUT) }, TIMEOUT * 2), } </script> <style scoped> @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap'); .wrap { text-align: center; display: block; position: relative; top: 40%; line-height: 60px; font-size: 16px; color: #606266; } .title { display: flex; overflow: hidden; color: #aa8f7b; font-family: 'Josefin Sans', sans-serif; } .title span { display: block; transform: translate(0, 105%); transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; } .title.-visible span { transform: translate(0, 0); } .title span:nth-child(2) { transition-delay: 0.06s; } .title span:nth-child(3) { transition-delay: 0.12s; } .title span:nth-child(4) { transition-delay: 0.18s; } .title span:nth-child(5) { transition-delay: 0.24s; } .title span:nth-child(6) { transition-delay: 0.3s; } .title span:nth-child(7) { transition-delay: 0.36s; } .title span:nth-child(8) { transition-delay: 0.42s; } .title span:nth-child(9) { transition-delay: 0.48s; } .title span:nth-child(10) { transition-delay: 0.54s; } .title span:nth-child(11) { transition-delay: 0.6s; } .title span:nth-child(12) { transition-delay: 0.66s; } .title span:nth-child(13) { transition-delay: 0.72s; } .title span:nth-child(14) { transition-delay: 0.78s; } /****** Base style. ******/ body { display: flex; height: 100vh; justify-content: center; align-items: center; margin: 0; } </style>
補足情報(FW/ツールのバージョンなど)

バッドをするには、ログインかつ
こちらの条件を満たす必要があります。