Etiket: function

AngularJS angular.equals Fonksiyonu

angular.equals Fonksiyonu;

İki nesne ya da iki değerin eşit olup olmadığını belirler. Değer türleri, düzenli ifadeler, diziler ve nesneleri destekler.

Örnek

w3tr = function () {
    a = {};
    b = {} ;
    alert(angular.equals(a, b) == angular.equals(b, a));
}

Codepen Ön izleme

Kullanımı

angular.equals(o1, o2);

Posted on by Samed GÖZÜTOK 0

AngularJS angular.element Fonksiyonu

angular.element Fonksiyonu;

Aşağıda izin verilen jQuery lite olarak da adlandırılan fonksiyonları kullanabilirsiniz.

addClass()

after()

append()

attr()

bind()

children()

clone()

contents()

css()

data()

detach()

empty()

eq()

find()

hasClass()

html()

next()

on()

off()

one()

parent()

prepend()

prop()

ready()

remove()

removeAttr()

removeClass()

removeData()

replaceWith()

text()

toggleClass()

triggerHandler()

unbind()

val()

wrap()

Kullanımı

angular.element(element);

Posted on by Samed GÖZÜTOK 0

AngularJS angular.copy Fonksiyonu

angular.copy Fonksiyonu;

Kaynağın bir nesne ya da dizi olması durumunda kopyasını oluşturur.

Örnek

angular.module('deneme', [])
  .controller('w3tr', ['test', function($scope) {
    $scope.master= {};
    $scope.update = function(user) {
      $scope.master= angular.copy(user);
    };
    $scope.reset = function() {
      angular.copy($scope.master, $scope.user);
    };
    $scope.reset();
  }]);

Codepen Ön izleme

Kullanımı

angular.copy(source, [destination]);

Posted on by Samed GÖZÜTOK 0

AngularJS angular.bootstrap Fonksiyonu

angular.bootstrap Fonksiyonu;

Eğer başlatma işlemi üzerinde daha fazla kontrol sahibi olmak isteniyorsa, bunun için manuel önyükleme yöntemini kullanabilirsiniz. Eğer bu fonksiyon kullanılacaksa otomatik başlatma işlemi olan ng-app direktivini kullanamassınız.

Örnek

var app = angular.module('deneme', [])
  .controller('w3tr', function($scope) {
      $scope.w3tr = 'W3TR';
  });
  angular.bootstrap(document, ['deneme']);

Codepen Ön izleme

Kullanımı

angular.bootstrap(element, [modules], [config]);

Posted on by Samed GÖZÜTOK 0

CSS3 animation-timing-function

animation-timing-function :

Animasyonda bir hız eğrisi belirler.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
    color: white;
     position: relative;
    -webkit-animation-name: mymove; /* Chrome, Safari, Opera */
    animation-name: mymove;
    -webkit-animation-duration: 5s;  /* Chrome, Safari, Opera */
    animation-duration: 5s;
    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
linear Animasyon baştan sona aynı hıza sahiptir.
ease Yavaş bir başlangıç ardından hızlanır ve yine yavaş bir şekilde sonlanır.
animation-timing-function Animasyonda bir hız eğrisi belirler.
ease-in Sadece başlangıç yavaştır.
ease-out Sadece bitiş yavaşlar.
ease-in-out Yavaş bir başlangıç hızlanmadan normal bir akış ardından yavaş bir son.(Yine çevirmeye bakalım)
cubic-bezier(n,n,n,n) Hızlanma ve yavaşlama noktalarını belirlersiniz.
İnital
İnherit

Tarayıcı Desteği
43.0
4.0-webkit		 16.0
5.0-moz		 10.0 9.0
4.0-webkit		 30.0
12.0-o
15.0-webkit
Posted on by Samed GÖZÜTOK 1

CSS3 transition-timing-function

transition-timing-function :

Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır.

Örnek

div {
  background: green;
  width: 200px;
  height: 20px;
  -webkit-transition-property: height; /* Safari */
   transition-property: height;
  -webkit-transition-duration: 3s; /* Safari */
   transition-duration: 3s;
   transition-timing-function: ease;
}
div:hover {
  height: 100px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
ease Animasyonun yavaş başlayıp hızlanması ve yavaş bitmesi ile sonuçlanan animasyon tipidir.
linear Başlangıç ve Bitiş hızı aynı olan geçiş tipidir.
Ease-in Animasyonun yavaş başlamasını sağlayan geçiş tipi.
Ease-out Animasyonun yavaş bitmesini sağlayan geçiş tipi.
Ease-in-out Yavaş başlayıp yavaş biten cublic-bezier eş değer bir geçiş tipi.
Cublic-bezier Manuel olarak ayarladığımız geçiş tipidir.0 ve 1 arasında değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
26.0
4.0-webkit		 16.0
4.0-moz		 10.0 6.1
3.1-webkit		 12.1
10.5-o
Posted on by Samed GÖZÜTOK 0