常連

自己紹介

javascript初心者です。

Chart.jsのグラフのアニメーションがjavascriptが読み込まれた際に動いているため
指定の位置までスクロールするとフェードインされるスクロールアニメーションの後に、表示される時には既にグラフのアニメーションが終わってしまいます。
そこで画面に表示したタイミングでアニメーションが開始されるinview.jsを使用しましたがうまくいかず、設置後は表示されなくなりました。

スクロールアニメーションが終わった後にグラフのアニメーションが始まる方法がありましたら、ご指導宜しくお願い致します。




```HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="js/jquery.inview.min.js" type="text/javascript"></script>

      <div class="fadein">
        <canvas id="doughnut07"></canvas>
      </div>

<section>
/*▼▼▼スクロール効果▼▼▼*/
$(function(){
  $(window).scroll(function (){
    $('.fadein').each(function(){
      var elemPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > elemPos - windowHeight + 400){
          $(this).addClass('scrollin');
      }
    });
  });
});

/*▼▼▼グラフ▼▼▼*/
$(function() {
  $('.doughnut07').on('inview', function(event, isInView) {
var data = [
　　{
　　　value: 53,/*男性*/
　　　color:"#feb0c1"
　　},
　　{
　　　value: 46,/*女性*/
　　　color: "#f8f8f8",
　　}
];

var myDoughnut = new Chart(document.getElementById("doughnut07").
getContext("2d")).Doughnut(data, {
  tooltipTemplate: "<%=value%> ％",
  animation:true,
  enabled:false,
});
});
});

</section>

```


```css

.fadein {
  opacity : 0;
  transform : translate(0, 50px);
  transition : all 1000ms;
}

/* 画面内に入った状態 */
.fadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}

```

画面表示後にjavascriptを動かす方法について

### 発生している問題・エラーメッセージ

```
in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-103f23fb","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./components/atoms/button/Fav_button.vue
Module not found: Error: Can't resolve 'assets/img/fav_heart.png' in '/Users/s-endo/web-poc/components/atoms/button'
 @ ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-103f23fb","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./components/atoms/button/Fav_button.vue 7:552-587
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-103f23fb","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./components/atoms/button/Fav_button.vue
 @ ./components/atoms/button/Fav_button.vue
 @ ./stories/index.stories.js
 @ ./stories .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js
```

Nuxt.js+storybook for vueで、エイリアス~を使いたい。

実現したいこと
---
slugの値に応じたコンテンツを表示を実現するため、発生している問題を解決したい。

発生している問題
---
index.vue（＝localhost:3000）にアクセスし、/contents/abcdeのリンクをクリックすると、コンテンツが正常に表示されます。正常に表示されるというのは、_slug.vueの{{ filteredData.title }}がbbbbbbbbbbと表示されるということを意味します。

しかしながら、URLを直に打つか、リロードすると"Cannot read property '0' of undefined"というエラーになります。

URLを直に打つか、リロードしても正常に表示されるようにしたいです。


前提
---
＜ファイル構成＞
```
pages/
--| contents/
-----| _slug.vue
index.vue
static/
--| data.json
``` 
＜取得するデータについて＞
static/data.json
```JSON
[
    {   
	"title": "bbbbbbbbbb",
	"name": "aaaaaaaa",
        "slug": "abcde"
    },
    {   
	"title": "cccccccccc",
	"name": "dddddddddd",
        "slug": "fghijk"
    }
]
```




コード
---
_slug.vue
```
<template>
	<div>
		{{ filteredData.title }}
	</div>
</template>

<script>
import mydata from '~/static/data.json' 

export default {
    
    data () { 
        return {
            mydata: mydata     
        }
        
    },
    computed: { 
        filteredData: function () {
             if (process.browser) { 
               
                var url = window.location.protocol+ '//' + window.location.host + ‘/contents/‘ 
                var matchData = this.mydata.filter(function(item, index){
                    if (item.slug === window.location.href.replace(url, '')) return true;
                })
            }
            return matchData[0]
        }
        
    }
}
</script>
```
index.vue
```ここに言語を入力
<template>
 <div>
  <b-button type="button"  to=“/contents/abcde”>View</b-button>
  <b-button type="button"  to=“/contents/fghijk”>View</b-button>
 </div>
</template>

<script></script>

```

slugに応じたコンテンツを表示する際のエラー／リロード又はURL直打ちでエラー

# 実現したいこと

私は現在、Nuxt.jsで静的サイトを作成しています。デザインフレームワークに[Material Components Web](https://github.com/material-components/material-components-web/)を使おうと思いnpmでインストールしたのですが、.scssファイルを取り込む方法が分かりません。

以下のようにインポートした場合、`mdc-button.scss`は読み込めているのですが、mdc-button.scssが依存している`ripple/common.scss`を読み込むことができません。

```scss
@import "~@material/button/mdc-button";
```

# エラー内容

```bash
error in ./layouts/default.vue

Module build failed: 
@import "@material/ripple/common";
^
     File to import not found or unreadable: @material/ripple/common.
     in /Users/*****/app/node_modules/@material/button/mdc-button.scss (line 17, column 1)

@ ./node_modules/vue-style-loader?{"sourceMap":true}!./node_modules/css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"/Users/*****/app/assets","/static":"/Users/*****/app/static"}}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-314f53c6","scoped":false,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./layouts/default.vue 4:14-531 13:3-17:5 14:22-539
@ ./layouts/default.vue
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
```

# 試したこと

こちらに書かれていることはひと通り試しました：[How to include path in sass-loader? · Issue #864 · nuxt/nuxt.js](https://github.com/nuxt/nuxt.js/issues/864)

# 補足情報

`package.json`は以下の通りになります。

```json
{
  ...
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "material-components-web": "^0.35.1",
    "nuxt": "^1.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1"
  }
}
```

お手数ですが、ご回答いただければ幸いです。

Nuxt.jsでMaterial Components Webを使うときに、Sassファイルを読み込めない

今回初めてsvgアニメーションに挑戦しています。
やりたい事は01～05のセクションごとにポイントとなるsvgアニメーションを設置し
スクロールでセクションが画面に表示されたタイミングでsvgアニメーションを実行したいです。

以下コードになります。
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/set.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.2/vivus.js"></script>
</head>

<body>
    <section id="box1">
        <object id="point1" type="image/svg+xml" data="img/svg/point1.svg"></object>
        <p>section1内容</p>
    </section>

    <section id="box2">
        <object id="point2" type="image/svg+xml" data="img/svg/point2.svg"></object>
        <p>section2内容</p>
    </section>

    <section id="box3">
        <object id="point3" type="image/svg+xml" data="img/svg/point3.svg"></object>
        <p>section3内容</p>
    </section>

    <section id="box4">
        <object id="point4" type="image/svg+xml" data="img/svg/point4.svg"></object>
        <p>section4内容</p>
    </section>

    <section id="box5">
        <object id="point5" type="image/svg+xml" data="img/svg/point5.svg"></object>
        <p>section5内容</p>
    </section>
</body>
</html>
```

```javascript
$(window).on('scroll' , function(){
    $('#point1').hide();
    $('#point2').hide();
    $('#point3').hide();
    $('#point4').hide();
    $('#point5').hide();

    if($('#box1').is(':show')){
        $('#point1').show();
    } else if($('#box2').is(':show')){
        $('#point2').show();
    }
});
```

javascriptのコードの書き方はどうしたら良いか分からなかったため適当になっています。
section2が表示（show）になったタイミングでsvgの#point2も表示（show）にすれば良いかと思い書いてみましたがだめでした。

現状はsvgアニメーションは動作しているのですが、
section1はファーストビューで目に入るのでアニメーションが動いているのが見えますが、
section2以降はスクロールしてもアニメーションが完了した状態で表示されています。

section2が画面に表示されたタイミングで#point2のsvgアニメーションをスタートさせたいです。
どのようにしたら良いでしょうか？

svgアニメーションを画面に表示されたタイミングで実行したい

### 前提・実現したいこと

swiperを利用し、画像+テキストのボックスをスライドさせるコンテンツスライダーを作りました。

例として下記の3つがスライドするページで、
<div class="swiper-slide" id="#no1">コンテンツ1</div>
<div class="swiper-slide" id="#no2">コンテンツ2</div>
<div class="swiper-slide" id="#no3">コンテンツ3</div>

ページAからアクセスした場合#no1から、
ページBからアクセスした場合は#no2からスライドが始まるという仕様にしたいのです。

スライダーを作るまではなんとか出来たのですが、途中へリンクを貼る方法が解りませんでした。

どなたかご教授願えませんでしょうか。