I'm new on the Vue js framework. And I'm trying to use 2 transition in one element which is working but the second transition doesn't work very well.
I mean the first works with the animation properties but the seconds works but the animation doesn't it.
Here's my code:
<div id="app-17" class="col-sm-4">
<h1>Lista con VueJS - AJAX</h1>
<button class="btn btn-sm btn-primary mb-4" v-on:click="show = !show">Mostar/Ocultar Lista</button>
<button class="btn btn-sm btn-primary mb-4" v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-if="show" v-for="item in list" v-bind:key="item.name">
{{item.name}}
</li>
</transition-group>
</div>
Here's the JavaScript:
<script type="text/javascript">
var urlUsers = 'https://jsonplaceholder.typicode.com/users'
app17 = new Vue({
el: '#app-17',
created: function(){
this.getUsers();
},
data: {
list: [],
show: false
},
methods: {
getUsers: function () {
this.$http.get(urlUsers).then(function (response) {
this.list = response.data;
});
},
shuffle: function () {
this.list = _.shuffle(this.list)
}
}
})
</script>
And the CSS style :
<style>
/*ANIMATION APP-8*/
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
.flip-list-move {
transition: transform 1s;
}
</style>
I'm also using those links:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
Here's live example:
https://codepen.io/blackandnoob/pen/qyeJVW
Related
I am making an alert system for a web application with Bootstrap 4. Here is my code:
function bsalert(str1, str2) {
$(".alert").addClass('show');
$(".alert").addClass('alert-'+str1);
$('.alert').html(str2);
setTimeout( function() {
$(".alert").removeClass('show');
$(".alert").removeClass('alert-'+str1);
}, 2000 );
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="alert alert-dismissible fade text-center" role="alert" id="alert"></div>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('danger', 'ALERT!');">one</button>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('success', 'nice');">two</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
The issue I am having is if you do it too quickly, before the timer removes the class, it breaks the ability to change alert types. How can I fix this? Does Bootstrap have a better function built in?
Edit: In this example I simplified the number of types of alerts, in actually there's more than just danger and success.
i hope it help you
var timer;
function bsalert(str1, str2) {
clearTimeout(timer)
$(".alert").removeClass('show');
$(".alert").removeClass('alert-danger');
$(".alert").removeClass('alert-success');
$(".alert").addClass('show');
$(".alert").addClass('alert-'+str1);
$('.alert').html(str2);
timer=setTimeout( function() {
$(".alert").removeClass('show');
$(".alert").removeClass('alert-'+str1);
}, 2000 );
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="alert alert-dismissible fade text-center" role="alert" id="alert"></div>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('danger', 'ALERT!');">one</button>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('success', 'nice');">two</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Now if you use the set time out function the alert will hide in 2 seconds interval so in the meantime if the notification is clicked many times continuously it will still hide the element in 2 seconds which can create an effect where you see it going off very quickly, there are few solutions to which: either you post an element with different id for every notification, or you restrict the function call or delay it after two seconds, or disable the notification button for 2 seconds so the notification is called only after every 2 seconds,also you can use the clear timeout function of javascript.
var timeoutElem;
function bsalert(str1, str2) {
var alertClassString = 'alert-' + str1;
var existingClass = '';
clearTimeout(timeoutElem);
existingClass = (str1 === "danger") ? 'alert-success' : 'alert-danger';
$(".alert").removeClass(existingClass);
$(".alert").addClass(alertClassString);
$(".alert").removeClass('show');
$(".alert").addClass('show');
$('.alert').html(str2);
timeoutElem = setTimeout(function() {
$(".alert").removeClass('show');
}, 2000);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="alert alert-dismissible fade text-center" role="alert" id="alert"></div>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('danger', 'ALERT!');">one</button>
<button type="button" class="btn btn-outline-primary" onclick="bsalert('success', 'nice');">two</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Currently, I'm trying to build a Heads or Tails system in HTML, CSS, & JavaScript, but when you flip the coin, there is no animation to show the flipping. I've tried to use timeInterval and timeOut, but they don't work correctly, am I doing something wrong?
function flipCoin() {
var randomSide = Math.floor(Math.random() * 2);
if (randomSide == 1) {
document.getElementById("coinImg").src =
"https://upload.wikimedia.org/wikipedia/commons/a/a0/2006_Quarter_Proof.png";
} else {
document.getElementById("coinImg").src = "https://www.coinhunts.com/wpcontent/uploads/2011/01/2005_CA_Proof.png";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Heads or Tails?</title>
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel='icon'
href='https://upload.wikimedia.org/wikipedia/commons/a/a0/2006_Quarter_Proof.png'>
<script src='script.js'></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</head>
<body>
<div class='container'>
<div class='row'>
<h1 class='mx-auto'>Heads or Tails? JS</h1>
</div>
<div class='row'>
<p class='mx-auto'>Click the Button Below to Flip a Coin!</p>
</div>
<div class='row'>
<button onclick='flipCoin();' class='btn btn-primary btn-lg mx-auto' type='button'>Flip a Coin</button>
</div>
<div class='row'>
<img href='' id='coinImg' class='mx-auto'/>
</div>
</div>
</body>
</html>
Try using setTimeout().
function coinSide() {
var randomSide = Math.floor(Math.random() * 2);
if (randomSide == 1) {
document.getElementById("coinImg").src = "HEADS_URL.png";
} else {
document.getElementById("coinImg").src = "TAILS_URL.png";
}
}
// Waits for 3 secs (3000ms) until executes the code
// Your random function is executed in setTimeout function
function flipCoin() {
document.getElementById("coinImg").src = "COIN_FLIP_GIF_URL_HERE.gif";
setTimeout(coinSide, 3000);
}
I am working on the below code. Why am I not able to reset the .container to be center on
$("#back").on("click", function(){
$(".container").animate({
'margin-left': 'auto',
'margin-right': 'auto',
'margin':'0 auto'
}, 550);
});
$("#move").on("click", function() {
$(".container").animate({
'margin-left': '2.1%'
}, 550);
});
$("#back").on("click", function() {
$(".container").animate({
'margin-left': 'auto',
'margin-right': 'auto',
'margin': '0 auto'
}, 550);
});
.container {
height: 100px;
background: khaki;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" id="move">Move Left</button>
<button type="button" class="btn btn-secondary" id="back">Get Back</button>
<div class="container"></div>
You can make the JavaScript remember the margin-left value, when the document gets ready to be spawned!
var margin;
$(document).ready(function() {
$('.container').css('margin-left', 'auto'); // first, align it in the center
margin = $('.container').css('margin-left'); // and then, store the value
// console.log(margin);
});
$("#move").on("click", function() {
$(".container").animate({
'margin-left': '2.1%'
}, 550);
});
$("#back").on("click", function() {
$(".container").animate({
'margin-left': margin, // use it anywhere ;)
'margin-right': 'auto',
'margin': '0 auto'
}, 550);
});
.container {
height: 100px;
background: khaki;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" id="move">Move Left</button>
<button type="button" class="btn btn-secondary" id="back">Get Back</button>
<div class="container"></div>
When I try to run, it not show my comment after I enter some text in comment box. Why? Also my another problem is the log show
ReferenceError: angular is not defined".
But I already place <script src="js/angular.min.js"></script> link to my js folder. What is wrong with my coding? I create app using ionic cordova and try to make comment that have upvote and downvote. Here the coding:
Script
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Vue.component('post', {
template: "#post-template",
props: ['post'],
data: function() {
return {
upvoted: false,
downvoted: false
};
},
methods: {
upvote: function() {
this.upvoted = !this.upvoted;
this.downvoted = false;
},
downvote: function() {
this.downvoted = !this.downvoted;
this.upvoted = false;
}
},
computed: {
votes: function() {
if (this.upvoted) {
return this.post.votes + 1;
} else if (this.downvoted) {
return this.post.votes - 1;
} else {
return this.post.votes;
}
}
}
});
var vm = new Vue({
el: "#app",
data: {
comments: [{}],
comment: ""
},
methods: {
postComment: function() {
this.comments.push({
title: this.comment,
votes: 0
})
this.comment = "";
}
}
});
CSS
a {
padding-left: 5px;
}
.disabled {
color: orange;
}
/* some simple transitions to make the upvote and downvote
buttons fade in as a visual cue for the user */
.glyphicon {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.glyphicon:hover {
opacity: 0.75;
cursor: pointer;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!--https://code.jquery.com/jquery-2.2.0.js-->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js-->
<!--https://cdn.jsdelivr.net/vue/1.0.16/vue.js-->
<script src="js/vue.js"></script>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div id="app">
<div class="container-fluid">
<ul class="list-group">
<post v-for="comment in comments" :post="comment"></post>
</ul>
<div id="comment-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter a comment..." v-model="comment" #keyup.enter="postComment">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" #click="postComment">Submit</button>
</span>
</div>
</div>
</div>
</div>
<template id="post-template">
<li class="list-group-item">
<i class="glyphicon glyphicon-chevron-up" #click="upvote" :class="{disabled: upvoted}"></i>
<span class="label label-primary">{{ votes }}</span>
<i class="glyphicon glyphicon-chevron-down" #click="downvote" :class="{disabled: downvoted}"></i>
<a>{{ post.title }}</a>
</li>
</template>
</ion-content>
</ion-pane>
</body>
</html>
I would like this fade class div to show on the page with a slow fade-in effect when the ng-show requirement has been met. In jQuery I could do this in a jiffy but it's proving difficult in Angular due to lack of working examples. Here is the working code:
Here is the index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl" class="container" style="padding-top:30px">
<user-info-card></user-info-card>
</body>
</html>
Here is the script.js:
angular.module('app', []);
angular.module('app').controller('mainCtrl', function($scope) {
$scope.user = {
name: 'Luke Skywalker',
address: {
street: 'PO Box 123',
city: 'Secret Rebel Base',
planet: 'Yavin 4'
},
friends: [
'Han',
'Leia',
'Chewbacca'
],
rank: 'scout',
score: 27
}
});
angular.module('app').directive('userInfoCard', function() {
return {
templateUrl: "userInfoCard.html",
restrict: "E",
controller: function($scope) {
$scope.knightMe = function(user) {
if (user.score > 25) {
user.rank = 'miner';
}
}
}
}
})
Here is the template file userInfoCard.html loaded by the directive:
<div class="panel panel-primary">
<div class="panel-heading">{{user.name}}</div>
<div class="panel-body">
<div ng-show='!!user.address'>
<h4>Address:</h4>
{{user.address.street}} <br />
{{user.address.city}}<br />
{{user.address.planet}}
</div> <br />
<h4>Friends:</h4>
<ul>
<li ng-repeat='friend in user.friends'>
{{friend}}
</li>
</ul>
<div>
Rank: {{user.rank}}
</div><br>
<div ng-show="user.score >= 25" ng-class="ng-show" class="fade">
<span>Congratulations, you have the ranked up! Click the button below to claim your new rank now.</span><br />
<button class="btn btn-success" ng-click="knightMe(user)">Knight Me</button>
</div>
</div>
</div>
And last but not least, the style.css:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-show {
transition: 0.5s linear all;
opacity: 1;
}
So in a nutshell, when the user score is more than 25, which it is in this case, I would like that fade class div to load in a gentle fade-in fashion. It's loading now fine but I'm not sure how to add the effect. Thanks for your time.
In order to animate ngShow/Hide elements you first need to include ngAnimate module:
angular.module('app', ['ngAnimate']);
Then all you need just a few little CSS rules:
.fade {
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove {
transition: all .5s linear;
display: block !important;
}
Demo: http://plnkr.co/edit/qHcMEL2Da5Fome7nUenf?p=info
You can do it by the following step:
Step1: First add the library/package of angular-animate.js
Step2: Then include the library in the module angular.module('app', ['ngAnimate']);
Step3 You can manipulate the UI like angular.element(element).fadeIn(1000, doneFn);
Check the documentation for Reference :https://docs.angularjs.org/api/ngAnimate
you are missing angular.module('app', ['ngAnimate']); otherwise animations wont work.
You may also wantto add Angular Animate