Browse: Home » _onichannn

_onichannn

【Angular.js】アニメーションの完了を検知して処理を実行する。

angualrのanimationは高速でクリックを繰り返したりすると、時々ng-animateクラスが削除され切らずにのこってしまい、表示がおかしくなる問題がある。
そこでアニメーションの終了を検知して、完了後自動でng-animateクラスを削除するように設定したらanimationの挙動を修正することが出来たのでメモ。

まずはanimation終了を検知するディレクティグを定義。

coreDirectives.directive('exShow', function($animate) {
    return {
        scope: {
            'exShow': '=',
            'afterShow': '&',
            'afterHide': '&'
        },
        link: function(scope, element) {
            scope.$watch('exShow', function(show, oldShow) {
                if (show) {
                    $animate.removeClass(element, 'ng-hide', scope.afterShow);
                }
                if (!show) {
                    $animate.addClass(element, 'ng-hide', scope.afterHide);
                }
            });
        }
    }
});

次にビュー側で用意したトリガーに関数をバインドする。

<div class="top-search-section" ex-show="sarchSection" after-hide="doneAnimate('top-search-section')"></div>

として、コントローラーでこうする。

$scope.toggleSearchSection = function() {
    $scope.sarchSection = $scope.sarchSection ? false : true;
}

$scope.doneAnimate = function(className) {
    $('.' + className).removeClass('ng-animate')
}

アニメーション終了後、doneAnimateが動作して、指定された要素の「ng-animate」クラスが削除されるという流れ。

 

2014/08/12 _onichannn , ,

【CSS】ラジオボタンにオリジナルのデザインを適用する。

方法を調べたのでメモ。

input[type="radio"]{
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 2px solid #aaa;
  border-radius: 15px;
  background: transparent;
  opacity: 0.5;
  width: 15px;
}

input[type="radio"]:checked{
  background: #bbb;
  opacity:1;
}

こんな感じにするとデザインを変更できる。

 

2014/08/12 _onichannn , ,

【Angular.js】タグインプットを実装する。

type=textのような入力フォームでタグ風に入力させることが出来るプラグイン。

http://ngmodules.org/modules/ngTagsInput

デモはこちら。

http://mbenford.github.io/ngTagsInput/demos.html

ドキュメントは下記。

http://mbenford.github.io/ngTagsInput/documentation

設定も豊富にあるし、これはめちゃくちゃ便利だわ。

 

2014/08/12 _onichannn , ,

【CSS】かっこいいReadMoreの実装方法。

テキストがだんだんとフェードアウトしていくような感じのデザイン。

http://css-tricks.com/text-fade-read-more/

これを参考に自分は白フェードアウトで実装してみた。

<div class="sidebar-box">
	<p>長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文</p>
	<p class="read-more"><a href="#" class="button">もっと読む</a></p>
</div>

.sidebar-box {
    height: 120px;
    position: relative;
    overflow: hidden;
    transition: height 0.8s ease;
    -o-transition: height 0.8s ease; 
    -moz-transition: height 0.8s ease;
    -webkit-transition: height 0.8s ease;
}
.sidebar-box .read-more { 
    position: absolute; 
    bottom: 0;
    left: 0;
    width: 100%; 
    text-align: center; 
    margin: 0;
    padding: 30px 0;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

 

2014/08/12 _onichannn , ,

【bootstrap3】caret（矢印）の向きを反転させる。

めも。

<span class="caret caret-reversed"></span> 

.caret.caret-reversed {
    border-top-width: 0;
    border-bottom: 4px solid #000000;
}

色に関しては「#000000」の部分を好きな色（#fffなど）に変えればよい。

 

2014/08/12 _onichannn , ,

【CSS】float指定がある要素の親要素に高さをもたせる方法。

divなど、要素をfloatさせると親要素の高さが0になってしまうが、これだと都合の悪いことが多々ある。
親要素にも高さをもたせ、次に続く要素達の位置を正しく配置するためには、
floatさせた要素の最後、ようは親コンテナの擬似要素である「:after」に「clear: both;」を適用してやればOK。

具体的には下記の通り。

<div class="container">

.container:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

contentで空要素を作成し、ブロック要素を指定、高さを0に設定し、visibilityで念のためコンテンツを非表示に設定。これにclear:bothをかけてやることで
親要素の高さも子要素に応じて変動してくれるようになる。

 

2014/08/12 _onichannn , ,

【Angular.js】表示する文字数を制限出来るangular-turncate。

例えばビュー側で何文字以降は「…」にしたいといった場合に便利。

ダウンロードとドキュメントは下記。

http://sparkalow.github.io/angular-truncate/

 

2014/08/12 _onichannn , ,

【Angular.js/bootstrap3】ng-repeatでrow、colを綺麗に出力させる。

完全に盲点だったんだけど、単純にブロックごとに分割されたオブジェクトをビューに渡してやればOK。

ビューはこんな感じ。

<div class="row" ng-repeat="row in rows">
    <div class="col-md-3" ng-repeat="col in row">
    </div>
</div>

てきな感じ。

下記エントリを見てハッとした。

http://stackoverflow.com/questions/11056819/how-would-i-use-angularjs-ng-repeat-with-twitter-bootstraps-scaffolding

 

2014/08/12 _onichannn , , ,