WEBVTT

00:00:00.851 --> 00:00:04.480
შეიძლება ახლა იმაზე დავობთ თუ რა ჯობს,

00:00:04.480 --> 00:00:08.522
SetInterval-ის გამოყენება
თუ requestAnimationFrame-სი,

00:00:08.522 --> 00:00:13.897
მაგრამ მე კიდევ ერთ
ვარიანტს შემოგთავაზებთ.

00:00:13.897 --> 00:00:17.165
Chrome-ში, Firefox-სა და IE10+-ში,

00:00:17.165 --> 00:00:21.580
არსებობს CSS-ით ანიმაციის შექმნის გზა,

00:00:21.580 --> 00:00:24.839
რისთვისაც ჯავასკრიპტი
საერთოდ არ არის საჭირო.

00:00:24.839 --> 00:00:30.763
რაც დავწერეთ გავაკომენტაროთ
და ვცადოთ Oh noes ანიმაციაზე.

00:00:30.763 --> 00:00:36.732
-- მოვაქციოთ მრავალხაზიან კომენტარში --

00:00:36.732 --> 00:00:41.051
დავიწყოთ გვერდისთვის
სტილის ტიპის დამატებით.

00:00:41.051 --> 00:00:44.756
შემდეგ კი დავუმატოთ
CSS-ის წესის მსგავსი ხაზი,

00:00:44.756 --> 00:00:48.045
რომელიც რეალურად ჩვენი
ანიმაციის განმარტება იქნება.

00:00:48.045 --> 00:00:55.292
დავწეროთ keyframes, შემდეგ კი
სახელი ჩვენი ანიმაციისთვის - getbigger,

00:00:55.292 --> 00:00:57.779
ბოლოს კი ფიგურული ფრჩხილები.

00:00:57.779 --> 00:01:01.364
უბრალო ანიმაციის გასაკეთებლად, რომელიც
ერთი მდგომარეობიდან მეორეში გადადის,

00:01:01.364 --> 00:01:07.253
განვსაზღვროთ -დან და -მდე, ანუ from და to.

00:01:07.253 --> 00:01:12.362
from-ში დავწეროთ CSS-ის საწყისი პირობა.

00:01:12.362 --> 00:01:16.483
თუ გაიხსენებთ, დასაწყისში ეს 50px იყო.

00:01:16.483 --> 00:01:21.267
to-ში დავწეროთ საბოლოო პირობა.

00:01:21.267 --> 00:01:26.055
მაგალითად, იყოს 300px.

00:01:26.055 --> 00:01:29.669
რადგან ანიმაცია განვმარტეთ,
ახლა ბრაუზერს უნდა ვუთხრათ,

00:01:29.669 --> 00:01:33.948
თუ რა ელემენტმა
უნდა გამოიყენოს ეს ანიმაცია.

00:01:33.948 --> 00:01:38.968
დავამატოთ ნორმალური
CSS წესი Oh noes-სთვის,

00:01:38.968 --> 00:01:47.245
შიგნით მივუთითოთ
ანიმაციის სახელი, getbigger,

00:01:47.245 --> 00:01:53.328
შემდეგ კი ანიმაციის
ხანგრძლივობა, სამი წამი.

00:01:53.328 --> 00:01:55.832
იმის მიხედვით თუ რა ბრაუზერი გაქვთ,

00:01:55.832 --> 00:01:59.202
ზოგიერთი ალბათ ფიქრობთ
რომ მაგარია და ყველაფერი მუშაობს,

00:01:59.202 --> 00:02:03.682
სხვებისთვის კი, Safari,
Chrome, ალბათ ეს არ მუშაობს.

00:02:03.682 --> 00:02:09.973
ეს არის რაღაცის, სახელად
Vendor Prefix-ების დამსახურება.

00:02:09.973 --> 00:02:16.342
ზოგჯერ ბრაუზერი წყვეტს რაიმე
ახალ თვისებას დაუჭიროს მხარი,

00:02:16.342 --> 00:02:19.471
მაგრამ ამ თვისებაზე
Vendor Prefix-ს განათავსებს,

00:02:19.471 --> 00:02:22.330
იმის ნიშნად, რომ შესაძლოა
ეს მომავალში შეიცვალოს.

00:02:22.330 --> 00:02:25.530
ეს მხოლოდ ბრაუზერების
კავშირია თვისებასთან.

00:02:25.530 --> 00:02:29.262
თუ ეს Chrome-ში გვინდა
გავუშვათ და ჯერ არ მუშაობს,

00:02:29.262 --> 00:02:32.005
საჭიროა ყველაფრის კოპირება რაც გავაკეთეთ

00:02:32.005 --> 00:02:34.831
და წინ webkit-ის დაწერა.

00:02:34.831 --> 00:02:38.529
ესეიგი, ვაკოპირებთ ამ ნაწილს,

00:02:38.529 --> 00:02:41.741
აქ ვწერთ: -webkit-

00:02:41.741 --> 00:02:50.114
აქ კი ვაკოპირებთ ამას და
აქაც, ვწერთ -webkit-, -webkit-

00:02:50.114 --> 00:02:55.094
ძალიან კარგი, ახლა გამოსახულება
იზრდება, ნებისმიერი ბრაუზერისთვის.

00:02:55.094 --> 00:02:58.113
იმედია იმ დროსითვის როცა ამას უყურებთ,

00:02:58.113 --> 00:03:00.246
Vendor Prefix-ები აღარ იქნება საჭირო,

00:03:00.246 --> 00:03:02.895
მაგრამ კარგია მათი არსებობის ცოდნა,

00:03:02.895 --> 00:03:08.194
შესაძლოა ოდესმე
მათი თვისებები გამოგვადგეს.

00:03:08.194 --> 00:03:11.803
CSS-ში კიდევ ერთი გზა
არსებობს ანიმაციის გასაკეთებლად.

00:03:11.863 --> 00:03:14.709
ეს არის გადატანის თვისება.

00:03:14.709 --> 00:03:20.624
ეს ბრაუზერს მიუთითებს თუ
როგორ გადავიდეს ერთი თვისებიდან მეორეზე.

00:03:20.624 --> 00:03:28.435
ვთქვათ, გვინდა დარჩენილი დროის ფონტის ზომა
გაიზარდოს როცა მაუსს მასზე გადავატარებთ.

00:03:28.435 --> 00:03:32.914
შეგვიძლია ეს ჯავასკრიპტში გავაკეთოთ
მაუსთან დაკავშირებული eventListener-ით,

00:03:32.914 --> 00:03:36.882
შემდეგ კი requestAnimationFrame-ს
გამოყენებით გავზარდოთ ფონტის ზომა,

00:03:36.882 --> 00:03:42.099
მაგრამ ამის გაკეთება
მთლიანად CSS-შიც შეგვიძლია.

00:03:42.099 --> 00:03:48.792
ვნახოთ, როგორ შევვლიდით CSS-ში ფონტს ისე,
რომ მაუსის გატარებისას იგი გაზრდილიყო?

00:03:48.792 --> 00:03:51.134
შეგვიძლია გამოვიყენოთ hover,

00:03:51.134 --> 00:03:55.061
ვწერთ: #countdown:hover,

00:03:55.061 --> 00:03:59.966
შემდეგ კი font-size: 150px;

00:03:59.966 --> 00:04:02.948
ახლა ისღა დაგვრჩენია ბრაუზერს მივუთითოთ,

00:04:02.948 --> 00:04:06.682
რომ ფონტის ზომის თვისება ცვალოს.

00:04:06.682 --> 00:04:11.477
რამდენ ხანში გააკეთოს ეს და
დროის ათვლის რა ფუნქცია გამოვიყენოთ?

00:04:11.477 --> 00:04:19.333
ვამბობთ: transition: font-size 1s linear;

00:04:19.333 --> 00:04:25.884
დააპაუზეთ გაკვეთილი და
გადაატარეთ მაუსი ტექსტს, ნახეთ რა მოხდება.

00:04:25.884 --> 00:04:28.869
თუ Chrome-ში, Firefox-ში ან IE10+-ში ხართ,

00:04:28.869 --> 00:04:31.725
მაშინ გამოსახულება გაიზრდება.

00:04:31.725 --> 00:04:35.634
ამ ტექნიკისთვის
Vendor Prefix-ებიც არ გვჭირდება.

00:04:35.634 --> 00:04:39.552
CSS-ის ანიმაციებითა და transition-ებით
მრავალი რამის გაკეთება შეიძლება,

00:04:39.552 --> 00:04:42.573
ბრაუზერები კი მათ
სწრფად აღიქვამს და ახორციელებს,

00:04:42.573 --> 00:04:45.480
ამიტომ გირჩევთ ორივე
უფრო დეტალურად გამოიკვლიოთ.